<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Dashboard</title>
    <!-- Link to the tooltip-flip.css file -->
    <link href="<?php echo e(asset('/plugin/tooltip/tooltip-flip.css')); ?>" rel="stylesheet" type="text/css" />
</head>

<body>
    <div class="row">
        <div class="col-xl-6">
            <div class="card card-stats mb-4 mb-xl-0">
                <div class="card-body">
                    <div class="row">
                        <div class="col">
                            <h5 class="card-title text-uppercase text-muted mb-0">Boy Children</h5>
                            <span class="h2 font-weight-bold mb-0">0</span>
                        </div>
                        <div class="col-auto">
                            <div class="icon icon-shape bg-danger text-white rounded-circle shadow">
                                <i class="fas fa-male"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-6">
            <div class="card card-stats mb-4 mb-xl-0">
                <div class="card-body">
                    <div class="row">
                        <div class="col">
                            <h5 class="card-title text-uppercase text-muted mb-0">Girl Children</h5>
                            <span class="h2 font-weight-bold mb-0">0</span>
                        </div>
                        <div class="col-auto">
                            <div class="icon icon-shape bg-primary text-white rounded-circle shadow">
                                <i class="fas fa-female"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row mt-4">
        <div class="col-xl-6 mb-5 mb-xl-0">
            <div class="card bg-gradient-default shadow">
                <div class="card-header bg-transparent">
                    <div class="row align-items-center">
                        <div class="col">
                            <h6 class="text-uppercase text-light ls-1 mb-1">Sponsors</h6>
                            <h2 class="mb-0">New Sponsors</h2>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <!-- Chart -->
                    <div class="chart">
                        <!-- Chart wrapper -->
                        <canvas id="chart-sponsors" class="chart-canvas"></canvas>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-6">
            <div class="card shadow">
                <div class="card-header bg-transparent">
                    <div class="row align-items-center">
                        <div class="col">
                            <h6 class="text-uppercase text-muted ls-1 mb-1">Donations</h6>
                            <h2 class="mb-0">Donation Value</h2>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <!-- Chart -->
                    <div class="chart">
                        <canvas id="chart-donations" class="chart-canvas"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

<?php $__env->startSection('body_bottom'); ?>
    <script>
        var chart_boy_children = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]; // Boy children data
        var chart_girl_children = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]; // Girl children data
        var chart_sponsors = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]; // Sponsors data
        var chart_donations = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]; // Donations data

        // Split chart data if needed
        chart_boy_children = chart_boy_children.split(",");
        chart_girl_children = chart_girl_children.split(",");
        chart_sponsors = chart_sponsors.split(",");
        chart_donations = chart_donations.split(",");

        $(document).ready(function () {
            // Boy children chart
            var BoyChildrenChart = (function() {
                var $chart = $('#chart-boy-children');
                function init($chart) {
                    var boyChildrenChart = new Chart($chart, {
                        type: 'line',
                        options: {
                            scales: {
                                yAxes: [{
                                    gridLines: {
                                        color: Charts.colors.gray[900],
                                        zeroLineColor: Charts.colors.gray[900]
                                    },
                                    ticks: {
                                        callback: function(value) {
                                            if (!(value % 10)) {
                                                return value;
                                            }
                                        }
                                    }
                                }]
                            },
                            tooltips: {
                                callbacks: {
                                    label: function(item, data) {
                                        var label = data.datasets[item.datasetIndex].label || '';
                                        var yLabel = item.yLabel;
                                        var content = '';
                                        if (data.datasets.length > 1) {
                                            content += '<span class="popover-body-label mr-auto">' + label + '</span>';
                                        }
                                        content += '<span class="popover-body-value">' + yLabel + '</span>';
                                        return content;
                                    }
                                }
                            }
                        },
                        data: {
                            labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
                            datasets: [{
                                label: 'Boy Children',
                                data: chart_boy_children
                            }]
                        }
                    });
                    $chart.data('chart', boyChildrenChart);
                }
                if ($chart.length) {
                    init($chart);
                }
            })();

            // Girl children chart
            var GirlChildrenChart = (function() {
                var $chart = $('#chart-girl-children');
                function init($chart) {
                    var girlChildrenChart = new Chart($chart, {
                        type: 'line',
                        options: {
                            scales: {
                                yAxes: [{
                                    gridLines: {
                                        color: Charts.colors.gray[900],
                                        zeroLineColor: Charts.colors.gray[900]
                                    },
                                    ticks: {
                                        callback: function(value) {
                                            if (!(value % 10)) {
                                                return value;
                                            }
                                        }
                                    }
                                }]
                            },
                            tooltips: {
                                callbacks: {
                                    label: function(item, data) {
                                        var label = data.datasets[item.datasetIndex].label || '';
                                        var yLabel = item.yLabel;
                                        var content = '';
                                        if (data.datasets.length > 1) {
                                            content += '<span class="popover-body-label mr-auto">' + label + '</span>';
                                        }
                                        content += '<span class="popover-body-value">' + yLabel + '</span>';
                                        return content;
                                    }
                                }
                            }
                        },
                        data: {
                            labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
                            datasets: [{
                                label: 'Girl Children',
                                data: chart_girl_children
                            }]
                        }
                    });
                    $chart.data('chart', girlChildrenChart);
                }
                if ($chart.length) {
                    init($chart);
                }
            })();

            // Sponsors chart
            var SponsorsChart = (function() {
                var $chart = $('#chart-sponsors');
                function init($chart) {
                    var sponsorsChart = new Chart($chart, {
                        type: 'line',
                        options: {
                            scales: {
                                yAxes: [{
                                    gridLines: {
                                        color: Charts.colors.gray[900],
                                        zeroLineColor: Charts.colors.gray[900]
                                    },
                                    ticks: {
                                        callback: function(value) {
                                            if (!(value % 10)) {
                                                return value;
                                            }
                                        }
                                    }
                                }]
                            },
                            tooltips: {
                                callbacks: {
                                    label: function(item, data) {
                                        var label = data.datasets[item.datasetIndex].label || '';
                                        var yLabel = item.yLabel;
                                        var content = '';
                                        if (data.datasets.length > 1) {
                                            content += '<span class="popover-body-label mr-auto">' + label + '</span>';
                                        }
                                        content += '<span class="popover-body-value">' + yLabel + '</span>';
                                        return content;
                                    }
                                }
                            }
                        },
                        data: {
                            labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
                            datasets: [{
                                label: 'Sponsors',
                                data: chart_sponsors
                            }]
                        }
                    });
                    $chart.data('chart', sponsorsChart);
                }
                if ($chart.length) {
                    init($chart);
                }
            })();

            // Donations chart
            var DonationsChart = (function() {
                var $chart = $('#chart-donations');
                function init($chart) {
                    var donationsChart = new Chart($chart, {
                        type: 'line',
                        options: {
                            scales: {
                                yAxes: [{
                                    gridLines: {
                                        color: Charts.colors.gray[900],
                                        zeroLineColor: Charts.colors.gray[900]
                                    },
                                    ticks: {
                                        callback: function(value) {
                                            if (!(value % 10)) {
                                                return value;
                                            }
                                        }
                                    }
                                }]
                            },
                            tooltips: {
                                callbacks: {
                                    label: function(item, data) {
                                        var label = data.datasets[item.datasetIndex].label || '';
                                        var yLabel = item.yLabel;
                                        var content = '';
                                        if (data.datasets.length > 1) {
                                            content += '<span class="popover-body-label mr-auto">' + label + '</span>';
                                        }
                                        content += '<span class="popover-body-value">' + yLabel + '</span>';
                                        return content;
                                    }
                                }
                            }
                        },
                        data: {
                            labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
                            datasets: [{
                                label: 'Donations',
                                data: chart_donations
                            }]
                        }
                    });
                    $chart.data('chart', donationsChart);
                }
                if ($chart.length) {
                    init($chart);
                }
            })();
        });
    </script>
<?php $__env->stopSection(); ?>
<?php /**PATH C:\Users\91638\VB150\VB150\resources\views/dashboard.blade.php ENDPATH**/ ?>