@extends('admin.layout')
@section('content')
                
 <section class="closeRegisterSection">
      <div class="closeRegister">
            <div class="registerInner">
              <h2>Close Reports</h2>
              <div class="custom-short" style="margin-bottom: 10px;">
                <input class="rangeDate form-control form-control-sm"></input>
               
              </div>
              <div class="outlets-sorts custom-short">
                <label>Filter By Outlets:</label>
                 <select id="outlets_sort" class="form-control form-control-sm">
                                  </select>
              </div>

              <table id="reportListing" class="table table-striped table-bordered" style="width:100%">
        <thead>
            <tr>
                <th>Opening date</th>
                <th>Name of Summary</th>
                <th> Total Sales Amount</th>
                <th> Staffs (Login Type) </th>
                 <th> Outlets</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
                  </tbody>
        <tfoot>
            <tr>
                <th>Opening date and time</th>
                <th>Name of Summary</th>
                <th> Total Sales Amount</th>
                <th> Outlets</th>
                <th>Action</th>
            </tr>
        </tfoot>
    </table>


            </div>
          </div>
    </section>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css">
  <script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
   <script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
   <!-- datetimepeaker -->

  <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<script type="text/javascript">
  var rangeDate = $(".rangeDate").daterangepicker({

        // timezone
        timeZone: 'utc',

        // 1 = monday
        firstDayOfWeek: 1,

        // minimum possible date
        minDate: [moment().subtract(30, 'years'), 'inclusive'],

        // maximum possible date
        maxDate: [moment(), 'inclusive'],

        // initial value for start date
        /*startDate: moment().subtract(29, 'days'),*/
        startDate: moment(),

        // initial value for end date
        endDate: moment(),

        // predefined date ranges
        ranges:{
              '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')],
              'Last 90 days': [moment().subtract(89, 'days'), moment()],
               'Last Year': [moment().subtract(1, 'year').add(1,'day'), moment()]
        },

        // initial value for period
        period: ('day' | 'week' | 'month' | 'quarter' | 'year'),
        //period: @period[0],

        // single mode?
        single: false,

        // or 'right'
        orientation: 'left',

        // opened on init
        opened: false,

        // expands predefined date ranges on init
        expanded: false,

        // standalone mode?
        standalone: false,

        // hide week days in day & week modes
        hideWeekdays: false,

        // set anchor element
        anchorElement: null,

        // parent element
        parentElement: document.body,

        // immediately invokes callback after constructing daterangepicker
        forceUpdate: false,

        // callback function
        callback: null
        
      });

table= $('#reportListing').DataTable({
      "order": [[ 0, "desc" ]]
    });
  // Extend dataTables search

$.fn.dataTable.ext.search.push(
  function(settings, data, dataIndex) {
    var rangeDate = $('.rangeDate').val();
    var arr = rangeDate.split('-');
    var min = arr[0];
    var max = arr[1];
    //console.log(min+'range'+data[0] );
    var createdAt = data[0] || 0; // Our date column in the table

    if (
      (min == "" || max == "") ||
      (moment(createdAt).isSameOrAfter(min) && moment(createdAt).isSameOrBefore(max))
    ) {
      return true;
    }
    return false;
  }
);

/*End Of advanced search*/


// Re-draw the table when the a date range filter changes
$('.rangeDate').change(function() {
  table.draw();
});

$('#outlets_sort').change(function(){

        table.columns( 3 ).search( $(this).val() ).draw();    
});
 /*$(document).ready(function() {
    $('#reportListing').DataTable();
});*/
</script>
   <!-- End -->
   <style type="text/css">

     .custom-short {
        margin-bottom: 7px;
        max-width: 256px;
        margin: 0 auto;
        margin-top: 20px;
    }
    select {
        height: auto !important;
    }
      div#reportListing_length select.custom-select.custom-select-sm.form-control.form-control-sm {
      width: 75px;
  }
.closeRegisterSection{
  margin-left: 300px;
}
   </style>
      @endsection