Cara select date range dengan modal lalu muncul ke table

saya sedang membuat select date range dengan modal tetapi ketika klik save data nya tidak ter save kira-kira kenapa ya ?

image.png

image.png

seharusnya data masuk ke table tersebut

web.php

//Route Report Data Karyawan
Route::get('/reportDataKaryawan', 'reportDataKaryawanController@previewForm')->name('reportDataKaryawan');
Route::get('/previewpertanggal/{tglawal}/{tglakhir}', 'reportDataKaryawanController@previewPertanggal')->name('reportDataKaryawan');

controller

    public function previewForm()
    {
        return view('halaman.reportDataKaryawan');
    }

    public function previewPertanggal(Request $request, $tglawal, $tglakhir)
    {
        $data = dataKaryawan::whereBetween('created_at', [  $tglawal,   $tglakhir])->get();
        return response()->json($data);

blade

<section class="section">
    <div class="card">
        <div class="card-header">
            <div class="col py-6">
                <h5 class="m-0 font-weight-bold text-primary">Report Data Karyawan</h5>
            </div>

                <button type="button" style="float: right; " data-toggle="modal" data-target="#quoteForm" class="btn btn-primary">
                    <i class="fa fa-print"></i>
                 Cetak  PDF
                </button>
                <button type="button" style="float: right; margin-right:10px; " data-toggle="modal" data-target="#quoteFormPreview" class="btn btn-secondary">
                    <i class="fa fa-file-archive-o"></i>
                    Preview
                </button>
            <div class="card-body">
                <div class="dataTable-wrapper dataTable-loading no-footer sortable searchable fixed-columns">
                    <div class="dataTable-container">
                        <table class="table table-striped dataTable-table  table-hover" id="table1">
                            <thead>
                                <tr>
                                     <th>No</th>
                            <th>Nama Karyawan</th>
                            <th>NIK</th>
                            <th>Nama Jabatan</th>
                            <th>Status</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!--GET a QUOTE MODAL Preview-->
<div class="modal fade" id="quoteFormPreview" tabindex="-1" role="dialog" aria-labelledby="dateRangeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="dateRangeModalLabel">Select Date Range</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form id="dateRangeForm">
          <div class="form-group">
            <label for="startDate">Start Date</label>
            <input type="date" class="form-control" id="tglawal" name="tglawal">
          </div>
          <div class="form-group">
            <label for="endDate">End Date</label>
            <input type="date" class="form-control" id="tglakir" name="tglakir">
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" id="preview">Preview</button>
      </div>
    </div>
  </div>
</div>

</section>

@include('sweetalert::alert')

@endsection
@push('script')
<script>
 $(document).ready(function() {
  // Attach an event listener to the search button
  $('#preview').click(function() {
    // Retrieve the selected start and end dates from the form input fields
    var tglawal = $('#tglawal').val();
    var tglakhir = $('#tglakir').val();
  });
});

    </script>
    @endpush