<div class="content-wrapper">
   <div class="content-header">
      <div class="container-fluid">
         <div class="row mb-2">
            <div class="col-sm-6">
               <h1 class="m-0">Dashboard</h1>
            </div>
            <div class="col-sm-6">
               <ol class="breadcrumb float-sm-right">
                  <li class="breadcrumb-item"><a href="#">Home</a></li>
                  <li class="breadcrumb-item active">Dashboard</li>
               </ol>
            </div>
         </div>
      </div>
   </div>
   <section class="content">
      <div class="container-fluid">
         <div class="row">
            <div class="col-lg-3 col-6">
               <div class="small-box bg-info">
                  <div class="inner">
                     <h3><?php echo $all_users; ?></h3>
                     <p>Total Members</p>
                  </div>
                  <div class="icon">
                     <i class="fa fa-users"></i>
                  </div>
                  <a href="<?php echo base_url() ?>/admin/report/all_volunteer_report" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
               </div>
            </div>
            <div class="col-lg-3 col-6">
               <div class="small-box bg-primary">
                  <div class="inner">
                     <h3><?php echo $count_project; ?></h3>
                     <p>Total Projects</p>
                  </div>
                  <div class="icon">
                     <i class="ion ion-bag"></i>
                  </div>
                  <a href="<?php echo base_url() ?>/admin/main_page_setting/featured_project" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
               </div>
            </div>
            <div class="col-lg-3 col-6">
               <div class="small-box bg-success">
                  <div class="inner">
                     <h3><?php echo $count_donation->donation_amount; ?></h3>
                     <p>Total Donation Collection</p>
                  </div>
                  <div class="icon">
                     <i class="fa fa-usd"></i>
                  </div>
                  <a href="<?php echo base_url() ?>/admin/report/all_donation_report" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
               </div>
            </div>
            <div class="col-lg-3 col-6">
               <div class="small-box bg-danger">
                  <div class="inner">
                     <h3><?php echo $count_blog; ?></h3>
                     <p>Total Blog</p>
                  </div>
                  <div class="icon">
                     <i class="fa fa-book"></i>
                  </div>
                  <a href="<?php echo base_url() ?>/admin/blog/view_all_blog" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
               </div>
            </div>
            <div class="col-lg-3 col-6">
               <div class="small-box bg-warning">
                  <div class="inner">
                     <h3><?php echo $count_donation_month->donation_amount; ?></h3>
                     <p>This Month Donations</p>
                  </div>
                  <div class="icon">
                     <i class="fa fa-usd"></i>
                  </div>
                  <a href="<?php echo base_url() ?>/admin/report/all_donation_report" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
               </div>
            </div>
            <div class="col-lg-3 col-6">
               <div class="small-box bg-secondary">
                  <div class="inner">
                     <h3><?php echo $count_event; ?></h3>
                     <p>Total Events</p>
                  </div>
                  <div class="icon">
                     <i class="fa fa-book"></i>
                  </div>
                  <a href="<?php echo base_url() ?>/admin/main_page_setting/all_event" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
               </div>
            </div>
            <!-- <div class="col-lg-12 col-12">
               <div class="card">
                  <div class="card-header border-transparent">
                     <h3 class="card-title">Day Wise Donation Report</h3>
                  </div>
                  <div class="card-body p-3">
                     <canvas id="day_wise_income" height="102"></canvas>
                  </div>
               </div>
            </div> -->
            <div class="col-lg-12 col-12">
               <div class="card">
                  <div class="card-header border-transparent">
                     <h3 class="card-title">Income Vs Expenses</h3>
                  </div>
                  <div class="card-body p-3">
                     <canvas id="monthly_income" height="102"></canvas>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </section>
</div>
<script src="<?php echo admin_css() ?>plugins/chart.js/Chart.js"></script>
<script type="text/javascript">
const monthly_income = document.getElementById('monthly_income').getContext('2d');
const monthly_inc = new Chart(monthly_income, {
   type: 'line',
   data: {
      labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
      datasets: [{
         label: 'Income ',
         data: [<?php echo $all_income; ?>],
         backgroundColor: ['rgba(255, 99, 132, 0.2)',],
         borderColor: ['rgba(255, 99, 132, 1)',],
         borderWidth: 2
      },
      {
         label: 'Expenses ',
         data: [<?php echo $all_expance; ?>],
         backgroundColor: ['rgba(255, 118, 0, 1, .2)',],
         borderColor: ['rgba(255, 118, 0, 1)',],
         borderWidth: 2
      }
      ]
   },
   options: {
      legend: {
         display: false,
      },
      scales: {
         y: {
            beginAtZero: true
         }
      },
   }
});
const product_sales = document.getElementById('product_sales').getContext('2d');
const product_sale = new Chart(product_sales, {
    type: 'line',
    data: {
        labels: [ <?php echo $product_name; ?> ],
        datasets: [{
            data: [ <?php echo $product_sale ?> ],
            backgroundColor: ['#ffc107', ],
            borderColor: ['#ffc107', ],
            borderWidth: 2
        }]
    },
    options: {
        scaleLabel: function(label) {
            return '$' + label.value
        },
        tooltips: {
            callbacks: {
                label: function(tooltipItems, data) {
                    return " ₹ " + tooltipItems.yLabel.toString();
                }
            }
        },
        legend: {
            display: false,
        },
        scales: {
            y: {
                beginAtZero: true
            }
        },
    }
});

const day_wise_income = document.getElementById('day_wise_income').getContext('2d');
const day_income = new Chart(day_wise_income, {
    type: 'line',
    data: {
        labels: [ <?php echo $dateList; ?> ],
        datasets: [{
            data: [ <?php $m = 1;
                if (!empty($day_income_report[0])) {
                    for ($i = 0; $i < count($alldatethismonth); $i++) {
                        if (!empty($day_income_report[0][$i])) {
                            for ($j = $m; $j <= count($alldatethismonth); $j++) {
                                if (@$day_income_report[0][$i]->month != $j) {
                                    echo "0,";
                                } else {
                                    echo($day_income_report[0][$i]->total_month.
                                        ",");
                                    $m = $day_income_report[0][$i]->month + 1;
                                    break 1;
                                }
                            }
                        } else {
                            echo "0,";
                            break;
                        }
                    }
                } ?>
            ],
            backgroundColor: ['#ffc107', ],
            borderColor: ['#ffc107', ],
            borderWidth: 2
        }]
    },
    options: {
        scaleLabel: function(label) {
            return '$' + label.value
        },
        tooltips: {
            callbacks: {
                label: function(tooltipItems, data) {
                    return " ₹ " + tooltipItems.yLabel.toString();
                }
            }
        },
        legend: {
            display: false,
        },
        scales: {
            y: {
                beginAtZero: true
            }
        },
    }
});
</script>