@extends('backend.layout.app')
<!-- title go hear -->
@section('title' , 'consultation ' )
<!-- content go hear -->
@section('content')
<div class="card  ">
<div class="card-header d-flex pb-2  bg-light">
     <a href="{{ route('backend.consultation.createOrupdate') }}"
    class="btn  btn-r  "><i class="fas fa-plus"></i>
    </a>
    <a  id="multi_delete" class="btn btn-r  text-secondary"   ><i class='fas fa-trash-alt'></i> </a>
    <a   class="btn btn-r  text-secondary" onclick="reloadTable('table1')" >
        <i class="fas fa-sync-alt"></i>
    </a>
    </div>
    <div class="card-body">
            <div class="row mb-3">
            <div class="col-md-2">
                <div class="form-group">
                    <input type="date" id="minDate" class="form-control" placeholder="From date">
                    <label class="form-label">From Date</label>
                </div>
            </div>
            <div class="col-md-2">
                <div class="form-group">
                    <input type="date" id="maxDate" class="form-control" placeholder="To date">
                    <label class="form-label">To Date</label>
                </div>
            </div>
            <div class="col-md-2 d-flex align-items-baseline">
                <button id="clearDateFilter" class="btn btn-secondary">Clear</button>
            </div>
        </div>
        <table id="table1" class="table table-bordered table-hover">
            <thead>
                <tr>
                    <th  class="text-white text-center">
                      <input type='checkbox' id='all_check'   >
                    </th>
                    <th>id</th>
                    <th>  qualification</th>
                    <th>  name</th>
                     <th>email</th>
                    <th>phone</th>
                      <th>message</th>
                    <th>created_at</th>
                    <th> </th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>

    </div>
</div>
@endsection

@push('footer-script')
<script type="text/javascript">

 //  dataTable
$(document).ready(function () {
        var table = $("#table1").DataTable({

	      "responsive": true,
	      "lengthChange": false,
	      "processing": true,
          "serverSide": true,
	      "autoWidth": false,
	      "dom": 'lBfrtip',
	      "buttons": ["copy", "csv", "excel", "colvis"],
	       ajax:{
                 url :"{{route('backend.consultation.result')}}",
                 type : "post",
                 headers : {
                              'X-CSRF-TOKEN': '{{ csrf_token() }}'
                           },
            data: function (d) {
                d.start_date = $('#minDate').val();
                d.end_date = $('#maxDate').val();
            }
               },
          columns : [
              { data:"check",name:"check", orderable: false, searchable: false,sWidth:'6%'},
              { data:"id"  },
              { data:"qualification"  },
              { data:"name"  },
               { data:"email"  },
              { data:"phone"  },
                { data:"message"  },
              { data:"created_at",visible: false  },
              { data:"action", orderable: false, searchable: false,sWidth:'6%'},
          ],
         order: [[1, 'desc']],
 	      "columnDefs": [{
              "targets": '_all',
              "defaultContent": ""
          }],
	    }) ;
	    
	    
	    
    // Date range filter
    $('#minDate, #maxDate').on('change', function () {
        table.draw();
    });
    
    // Clear filter button
    $('#clearDateFilter').on('click', function(e) {
        e.preventDefault();
        $('#minDate').val('');
        $('#maxDate').val('');
        table.draw();
    });

        //  multiple check box
      $( '#all_check' ).click(function() {
           $('.check_box').prop('checked', $(this).prop('checked'));

      });

       // multiple delete
         $('#multi_delete').on('click', function(e) {
             var allVals = [];
             $('.check_box:checked').each(function() {
                 allVals.push($(this).val());
             });
             data = [];
             data["id"] = allVals.toString() ;
             data["url"] = "{{ route('backend.consultation.destroy') }}";
             data["table"] = "table1";
             if(allVals.length === 0){
                 toastr.info( 'Oops!.. please select first.. ');

             }
             else{
              deleteMe( data );
                  $('#all_check').prop('checked', false);  // after delete uchek main

             }
          });

 });


</script>

@endpush