@extends('layouts.app')

@section('pagestyle')
    <link rel="stylesheet" href="{{ asset('app/bundles/datatables/datatables.min.css') }}">
    <link rel="stylesheet" href="{{ asset('app/bundles/datatables/DataTables-1.10.16/css/dataTables.bootstrap4.min.css') }}">
@endsection
@include('tickets.modals')
@section('content')
{{-- {{ dd($tickets) }} --}}

<div class="row">
    <div class="col-12">
      <div class="card card-success">
        <div class="card-header">
          <h4>{{ !empty($pagename)?$pagename:'' }}</h4>
        </div>
        <div class="card-body">
          <div class="searchFieldBox container-fluid card-body row d-flex">
            <div class="row mx-auto w-75">
                <div class="col">
                    <label class="f-16 f-w-700">Duration:</label>
                    <select name="duration" id="durationField" class="form-control">
                      <option value="">--Select--</option>
                      <option value="day">Today</option>
                      <option value="week">This Week</option>
                      <option value="month">This Month</option>
                      <option value="custom">Custom</option>
                      </select>
                </div>

                <div class="col">
                    <label class="f-16 f-w-700">From:</label>
                        <input type="date" id="start_date" name="start_date" max="{{ date('Y-m-d') }}" class="form-control">
                </div>

                <div class="col">
                    <label class="f-16 f-w-700">To:</label>
                    <input type="date" id="end_date" name="end_date" max="{{ date('Y-m-d') }}" class="form-control">
                </div>
            </div>
            <div class="row mx-auto mt-3 w-50 f-14">
                <button class="searchField btn btn-primary col" id="filterData">Filter</button>
            </div>
        </div>
          <div class="table-responsive">
            {{ $dataTable->table(['class' => 'table table-striped table-hover']) }}
            
          </div>
        </div>
      </div>
    </div>
  </div>
@endsection

@section('pageScript')
{{ $dataTable->scripts() }}

 @include('layouts.datatablescripts')
  {{-- <script src="{{ asset('app/bundles/izitoast/js/iziToast.min.js') }}"></script>   --}}
  
 <script>
   $(document).ready(function(){
      let filterData = $('#filterData')
      let duration = $('#durationField');
      let start_date = $('#start_date');
      let end_date = $('#end_date');

      filterData.on('click', function(e) {
          e.preventDefault();
          // alert()
          getFilteredData();
      });
      function getFilteredData() {
                console.log('Form Data => ', duration.val(), start_date.val(), end_date.val(),)

                // Validations
                if (!duration.val()) {
                    errorMsg('Validation Error','The Duration filed is required');
                    return false;
                } else if (duration.val() == 'custom' && (!start_date.val() || !end_date.val())) {
                    errorMsg('Validation Error','The From & To fields are required when the duration is custom');
                    return false;
                }

                const table = $('#dataTable');
                table.on('preXhr.dt', function(e, settings, data) {
                  // console.log('Filtering');
                    data.duration = duration.val()
                    data.start_date = start_date.val()
                    data.end_date = end_date.val()

                });

                refreshTable(table);
            }

            function refreshTable(table) {
                // console.log('I am called');
                table.DataTable().ajax.reload();
            }

           

   
          })
  
 </script>
@endsection