@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>
            <div class="row ">
                    
                    <div class="col-xl-3 col-lg-6">
                        <div class="card l-bg-blue-dark">
                          <div class="card-statistic-3 p-4">
                            <div class="card-icon card-icon-large"><i class="fas fa-list"></i></div>
                            <div class="mb-4">
                              <h5 class="card-title mb-0">Total Amount</h5>
                            </div>
                            <div class="row align-items-center mb-2 d-flex">
                              <div class="col-8">
                                <h2 style="font-size:17px" class="d-flex align-items-center mb-0">
                                  GHS{{ $success_amt }}
                                </h2>
                              </div>
                            </div>
                            {{-- <div class="card-hover">
                              <div class="d-flex align-items-center"> 
                                <div class="icon">
                                  <i class="fas fa-list"></i>
                                </div>
                                <div class="text">
                                  <h5 class="card-title mb-0">Total Amount</h5>
                                  <h2 style="font-size:17px" class="d-flex align-items-center mb-0">
                                    GHS{{ $success_amt }}
                                  </h2>
                                </div>
                              </div>
                            </div> --}}
                          </div>
                        </div>
                      </div>
                      
                    <div id="btn-status-success" class="btn-status col-xl-3 col-lg-6">
                        <div class="card l-bg-green-dark">
                            <div class="card-statistic-3 p-4">
                                <div class="card-icon card-icon-large"><i class="fas fa-check"></i></div>
                                <div class="mb-4">
                                    <h5 class="card-title mb-0">Success</h5>
                                </div>
                                <div class="row align-items-center mb-2 d-flex">
                                    <div class="col-8">
                                        <h2 class="d-flex align-items-center mb-0">
                                            {{ $count_success }}
                                        </h2>
                                    </div>
                                   
                                </div>
                                {{-- <div class="card-hover">
                                    <div class="d-flex align-items-center">
                                      <div class="text">
                                        <h5 class="card-title mb-0"></h5>
                                        <h2 style="font-size:17px" class="d-flex align-items-center mb-0">
                                           FILTER BY SUCCESS
                                        </h2>
                                      </div>
                                    </div>
                                  </div> --}}
                                
                            </div>
                        </div>
                    </div>
                        <div id="btn-status-pending" class="btn-status col-xl-3 col-lg-6">
                            <div class="card l-bg-orange-dark">
                                <div class="card-statistic-3 p-4">
                                    <div class="card-icon card-icon-large"><i class="fas fa-clock"></i></div>
                                    <div class="mb-4">
                                        <h5 class="card-title mb-0">Pending</h5>
                                    </div>
                                    <div class="row align-items-center mb-2 d-flex">
                                        <div class="col-8">
                                            <h2 class="d-flex align-items-center mb-0">
                                                {{ $count_pending }}
                                            </h2>
                                        </div>
                                       
                                    </div>
                                    {{-- <div class="card-hover">
                                        <div class="d-flex align-items-center">
                                          
                                          <div class="text">
                                            <h5 class="card-title mb-0"></h5>
                                            <h2 style="font-size:17px" class="d-flex align-items-center mb-0">
                                               FILTER BY PENDING
                                            </h2>
                                          </div>
                                        </div>
                                      </div> --}}
                                    
                                </div>
                            </div>
                        </div>
                
                        <div id="btn-status-failed" class="btn-status col-xl-3 col-lg-6">
                            <div class="card l-bg-cherry">
                                <div class="card-statistic-3 p-4">
                                    <div class="card-icon card-icon-large"><i class="fas fa-skull-crossbones"></i></div>
                                    <div class="mb-4">
                                        <h5 class="card-title mb-0">Failed</h5>
                                    </div>
                                    <div class="row align-items-center mb-2 d-flex">
                                        <div class="col-8">
                                            <h2 class="d-flex align-items-center mb-0">
                                                {{ $count_failed }}
                                            </h2>
                                        </div>
                                      
                                    </div>
                                    {{-- <div class="card-hover">
                                        <div class="d-flex align-items-center">
                                          <div class="text">
                                            <h5 class="card-title mb-0"></h5>
                                            <h2 style="font-size:17px" class="d-flex align-items-center mb-0">
                                               FILTER BY FAILED
                                            </h2>
                                          </div>
                                        </div>
                                      </div> --}}
                                   
                                </div>
                            </div>
                        </div>
            </div>
        
            <div class="row">
                <div class="container px-4 mx-auto col-md-6">

                    <div class="card p-6 m-20 bg-white rounded shadow">
                        {!! $barchart->container() !!}
                    </div>
                
                </div>
                <div class="container px-4 mx-auto col-md-6">

                    <div class="card p-6 m-20 bg-white rounded shadow">
                        {!! $donutchart->container() !!}
                    </div>
                
                </div>
                
                <script src="{{ $barchart->cdn() }}"></script>
                
                {{ $barchart->script() }}
                <script src="{{ $donutchart->cdn() }}"></script>
                
                {{ $donutchart->script() }}
            </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 = $('#alldonations-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>
    <script>
        document.getElementById("btn-status-success").addEventListener("click", function() {
            document.getElementById("status").value = "success";
            $('#filterDonations').click();
          });
          document.getElementById("btn-status-pending").addEventListener("click", function() {
            document.getElementById("status").value = "pending";
            $('#filterDonations').click();
          });
          document.getElementById("btn-status-failed").addEventListener("click", function() {
            document.getElementById("status").value = "failed";
            $('#filterDonations').click();
          });
    </script>

@endsection