@extends('layout.adminapp')
@section('page-css')
  <link rel="stylesheet" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap4.min.css">
  <link href="{{ asset('css/buttons.bootstrap.min.css') }}" rel="stylesheet">
    <link href="{{ asset('css/buttons.dataTables.min.css') }}" rel="stylesheet">
    {{-- <link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.0.3/css/buttons.dataTables.min.css"> --}}
          <link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.6.2/css/buttons.dataTables.min.css"/>
@endsection
@section('page-content')

      <section class="content">

        <div class="content-inner content-docs">
<div class="card">
<div class="card-header">
  Audit Trail
</div>
  <div class="card-body">
    <div class="row" style="padding-left: 15px">
            <div class="col-md-4 form-group" style="padding-right: 10px">
                <label>Start Duration</label>
                <input class="form-control" type="date" name="start_duration" id="start_duration">
            </div>
            <div class="col-md-4 form-group" style="padding-right: 10px">
                <label>End Duration</label>
                <input class="form-control" type="date" name="end_duration" id="end_duration">
            </div>
            <div class="col-md-4" style="padding-top: 10px">
                <br />
                <button id="btnGenerate" class="btn btn-primary btn-sm">Generate</button>
            </div>
        </div>
    {{$dataTable->table(['id'=>'audit_trail-table','class' => 'table table-bordered table-striped table-centered table-hover w-100 dt-responsive nowrap mb-0',])}}

  </div>
</div>
          </div>
        </div>
@endsection

@section('page-js')
  <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
    <script src="{!! asset('vendor/datatables/buttons.server-side.js') !!}"></script>
    <script src="{!! asset('js/dataTables.buttons.min.js') !!}"></script>
    <script src="{!! asset('js/buttons.server-side.js') !!}"></script>
    {{$dataTable->scripts()}}
    <script>
        const table1 = $('#audit_trail-table');

        table1.on('preXhr.dt', function (e, settings,data) {


            data.start_duration = $('#start_duration').val();
            data.end_duration = $('#end_duration').val();

            console.log(data.start_duration, data.end_duration);


        });


        $('#btnGenerate').on('click', function () {


            table1.DataTable().ajax.reload();
            return false;
        });

    </script>
@endsection