BBnepal-Accounts/application/views/admin/report_overview.php

<style>
    table.dataTable tfoot th {
        font-weight: 600 !important;
    }
</style>
<div class="wraper responsive-width">

    <main class="long-tbl-main" id="main">
        <!-- admin template section -->
        <div class="admin_tempblock">
            <div class="admin_tempsec">
                <div class="admin_sec">

                    <div class="subsec_sec" style="display:block">
                        <div class="subject_lsec dashboard_graph report_sec_graph">
                            <div class="subject_lhead">Current Month Report Overview</div>
                            <div class="report_sec_cover">
                                <div class="report_sec_left">
                                    <?php
                                    $currency_symbol =  $school_info['currency_symbol'];
                                    $TotalDueAmt = 0;
                                    $TotalCollectedAmt = 0;
                                    foreach ($current_report_data as $report_value) {
                                        $TotalDueAmt += $report_value['feetype_due_amt'];
                                        $TotalCollectedAmt += $report_value['feetype_paid_amount'];
                                        $feeTypeId = (isset($report_value['feetype_id']) && !empty($report_value['feetype_id'])) ? $report_value['feetype_id'] : 0;
                                    ?>

                                        <div class="report_tabs">
                                            <div class="report_head">
                                                <img src="<?= base_url(); ?>assets_admin/images/icons/<?= $report_value['feetype_icon'] ?>" class="report_icon">
                                                <a href="<?php echo base_url(); ?>admin/payment-overview/<?= $feeTypeId; ?>">
                                                    <h5><?= $report_value['feetype_name'] ?></h5>
                                                </a>
                                            </div>
                                            <ul class="report_info">
                                                <li>
                                                    <label><img src="<?= base_url(); ?>assets_admin/images/icons/pending.png">Due Amount :</label><span><?= $report_value['feetype_due_amt'] ?></span>
                                                </li>
                                                <li>
                                                    <label><img src="<?= base_url(); ?>assets_admin/images/icons/collected.png">Collected :</label><span><?= $report_value['feetype_paid_amount'] ?></span>
                                                </li>
                                                <li>
                                                    <label><img src="<?= base_url(); ?>assets_admin/images/icons/due-date.png">Total Amount :</label><span><?= $report_value['feetype_total'] ?></span>
                                                </li>
                                            </ul>
                                        </div>
                                    <?php } ?>
                                </div>
                                <div class="subject_lhead">Current Month Overview</div>
                                <div class="report_sec_right report_dashboard">
                                    <div class="report_graph">
                                        <div id="recoveryGraf" style="width:700px;margin-left: 170px;"></div>
                                        <div class="graph_details">
                                            <ul>
                                                <?php
                                                $graph_data = array();
                                                foreach ($current_report_data as $collected_value) {
                                                    $graph_data[] = array(
                                                        'typename' => $collected_value['feetype_name'],
                                                        'total' => $collected_value['feetype_paid_amount']
                                                    );
                                                ?>
                                                    <li><span>&nbsp;</span>
                                                        <p class="chart_fee_name"><?= $collected_value['feetype_name']; ?></p>
                                                        <p class="chart_fee"><?= $collected_value['feetype_paid_amount']; ?></p>
                                                    </li>
                                                <?php }
                                                // $piechart_data = json_encode($graph_data);
                                                ?>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="report_graph_info">
                                        <ul class="report_info">
                                            <li>
                                                <label><img src="<?= base_url(); ?>assets_admin/images/icons/pending.png">Due Amount :</label><span><?= $TotalDueAmt; ?></span>
                                            </li>
                                            <li>
                                                <label><img src="<?= base_url(); ?>assets_admin/images/icons/collected.png">Collected :</label><span><?= $TotalCollectedAmt; ?></span>
                                            </li>
                                            <li>
                                                <label><img src="<?= base_url(); ?>assets_admin/images/icons/due-date.png">Total Amount :</label><span><?php echo $TotalAmount = ($TotalDueAmt + $TotalCollectedAmt); ?></span>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
  
                                <!-- new divs added -->
                            
                        </div>




                    </div>
                </div>

            </div>
            <!-- admin template section end -->
    </main>
    <!--End right-top side-->

</div>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>


<script>
    $(document).ready(function() {
        $('.user-drpdown').click(function() {
            $('.drpdown-items').toggle();
        });

        var currency_symbol = "<?php echo $currency_symbol; ?>";
        //table js
 
        $('#tbl2').DataTable({
            "lengthMenu": [
                [5, 10, 25, 50, -1],
                [5, 10, 25, 50, "All"]
            ]
        });
        $('#tbl3').DataTable({
            "lengthMenu": [
                [5, 10, 25, 50, -1],
                [5, 10, 25, 50, "All"]
            ]
        });
        //table js end
        //multiple select js start
        $('select').selectpicker();
        //multiple select js end

    });
</script>

<script>
    var graph_data = <?= json_encode($graph_data); ?>;
    console.log(graph_data);

    Highcharts.setOptions({
        lang: {
            drillUpText: '<< Back'
        }
    });

    Highcharts.chart('recoveryGraf', {
        chart: {
            type: 'pie'
        },
        title: {
            text: ''
        },
        plotOptions: {
            series: {
                dataLabels: {
                    enabled: true,
                    format: '{point.name}: {point.y:.1f}'
                }
            }
        },

        tooltip: {
            headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
            pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}</b> of total<br/>'
        },
        series: [{
            name: 'Fee Report',
            colorByPoint: true,
            colors: ['#032da1', '#133ba7', '#2449ad', '#3557b3', '#4665ba', '#5773c0', '#6781c6', '#788fcd', '#899dd3','#a0a9c1','#899bcde6'],
            data: [
                <?php
                foreach ($graph_data as $v) {
                    echo "['" . $v['typename'] . "'," . $v['total'] . "],\n";
                } ?>
            ]
        }],
        drilldown: {
            series: [{
                name: 'Recycleds',
                id: 'Recycleds',
                colors: ['#032da1', '#133ba7', '#2449ad', '#3557b3', '#4665ba', '#5773c0', '#6781c6', '#788fcd', '#899dd3','#a0a9c1','#899bcde6'],
                data: [
                    <?php
                    foreach ($graph_data as $v) {
                        echo "['" . $v['typename'] . "'," . $v['total'] . "],\n";
                    } ?>
                ]
            }]
        }
    });
</script>
</body>

</html>