@extends('layouts.main-layout')
@section('include-style')
    @include('layouts.datatable-css')
@endsection
@section('content')
    <!-- begin container-fluid -->
    
    <div class="container-fluid">
            <div class="col-md-10 ">
                <div class="row ">
         
                  
                       
    
                </div>
            </div>
            <div class="mb-1">
                <h3>TRANSACTIONAL REPORT</h3>
            </div>
        <div class="container-fluid" style="justify-content: center; display:flex;">
            <form action=""  class="col-12">
                @csrf
                <div class="container">
                    <div class="row">
                        <div class="container-fluid">
                            <div class="form-group row">
                                <div class="input-group mb-3 col-sm-3">
                                    <div class="input-group-prepend">
                                      <label class="input-group-text" for="inputGroupSelect01">status</label>
                                    </div>
                                    <select style="background: #d9d9d9;"  name="status" class="status custom-select" id="status">
                                      <option value="" selected>Choose...</option>
                                      <option value="success">success</option>
                                      <option value="pending">pending</option>
                                      <option value="failed">failed</option>
                                    </select>
                                  </div>
                                  <div class="col-sm-3 row">
                                      <label style="color: teal;" for="date" class="col-form-label col-md-6">Start Date</label>
                                      <input  style="background: #d9d9d9;" type="date" class="form-control input-sm col-md-6" id="startDate" name="startDate">
                                </div>  
                                <div class="col-sm-3 row">
                                    <label style="color: teal;" for="date" class="col-form-label col-md-5">End Date</label>
                                    <input style="background: #d9d9d9;" type="date" class="form-control input-sm col-md-7" id="endDate" name="endDate">
                                </div>
                                <div class="col-sm-1">
                                    <button class="search btn" id="filterDonations" type="button"  name="search" title="search">Filter</button>
                                </div>
                                <div class="col-sm-2 text-center">
                                    <a href="{{ route('donation.report') }}" class="btn btn-primary" id="clearDonations"   name="reset" title="reset">Reset</a>
                                </div>
                            </div>
                            
                        </div>
                    </div>
                </div>
    
            </form>
        </div>
        <!-- begin row -->
        <div class="row">
            <div class="col-lg-12">
                <div class="card card-statistics">
                    <div class="card-body">
                        <div class="datatable-wrapper table-responsive text-dark table-striped">
                            {!! $dataTable->table() !!}
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <!-- end container-fluid -->
@endsection
@section('include-js')
    <!-- third party js ends -->
    {!! $dataTable->scripts() !!}

    <!-- third party js -->
    @include('layouts.datatable-js')
    <!-- third party js ends -->

    <script>
        $(document).ready(function(){
            const table = $('#payment-table');
            table.on('preXhr.dt', function(e, settings, data){
                data.startDate = $('#startDate').val();
                data.endDate = $('#endDate').val();
                data.status = $('#status').val();
                console.log(data.startDate,  data.endDate, data.status)
            });
            $('#filterDonations').on('click', function(){
                table.DataTable().ajax.reload();
            })
        });
    </script>
@endsection