<?php echo message_box('success') ?>
<?php echo message_box('error') ?>

<div class="space-y-6">   

    <div class="rounded-2xl border border-border bg-card shadow-sm">
        <div class="p-5">
            <div class="rounded-xl">
                <table class="DataTables w-full border-collapse text-sm" id="DataTables" cellspacing="0" width="100%">
                    <thead class="bg-muted/50 text-xs uppercase tracking-[0.14em] text-muted-foreground dark:bg-slate-800/80 dark:text-slate-400">
                        <tr>
                            <th class="border-b border-border px-4 py-3 text-left font-semibold dark:border-slate-700"><?= lang('name') ?></th>
                            <th class="border-b border-border px-4 py-3 text-left font-semibold dark:border-slate-700"><?= lang('code') ?></th>
                            <th class="border-b border-border px-4 py-3 text-left font-semibold dark:border-slate-700"><?= lang('quantity') ?></th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 gap-6 xl:grid-cols-2">
        <div class="rounded-2xl border border-border bg-card shadow-sm">
            <div class="border-b border-border px-5 py-4">
                <h3 class="text-sm font-semibold text-foreground"><?= lang('best_selling') . ' ' . lang('product') ?></h3>
            </div>
            <div class="p-5">
                <div id="morris-bar" class="min-h-[320px]"></div>
            </div>
        </div>

        <div class="rounded-2xl border border-border bg-card shadow-sm">
            <div class="border-b border-border px-5 py-4">
                <h3 class="text-sm font-semibold text-foreground"><?= lang('Worst_selling') . ' ' . lang('product') ?></h3>
            </div>
            <div class="p-5">
                <div class="chart-pie min-h-[320px]"></div>
            </div>
        </div>
    </div>
</div>

<script src="<?= base_url() ?>assets/plugins/raphael/raphael.min.js"></script>
<script src="<?= base_url() ?>assets/plugins/morris/morris.min.js"></script>
<script src="<?= base_url() ?>assets/plugins/Flot/jquery.flot.js"></script>
<script src="<?= base_url() ?>assets/plugins/Flot/jquery.flot.tooltip.min.js"></script>
<script src="<?= base_url() ?>assets/plugins/Flot/jquery.flot.resize.js"></script>
<script src="<?= base_url() ?>assets/plugins/Flot/jquery.flot.pie.js"></script>
<script src="<?= base_url() ?>assets/plugins/Flot/jquery.flot.time.js"></script>
<script src="<?= base_url() ?>assets/plugins/Flot/jquery.flot.categories.js"></script>
<script src="<?= base_url() ?>assets/plugins/Flot/jquery.flot.spline.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    list = base_url + "admin/best_selling/bestsellinglist";

    if (typeof fire_datatable === "function") {
        fire_datatable(list);
    }

    var chartdata = [
        <?php
        if (!empty($bestselling)) :
            foreach ($bestselling as $user => $v_bestselling) :
                $inparogress = $v_bestselling->quantity;
        ?> {
            y: "<?= $v_bestselling->item_name ?>",
            a: <?= $inparogress; ?>,
        },
        <?php
            endforeach;
        endif;
        ?>
    ];
    new Morris.Bar({
        element: 'morris-bar',
        data: chartdata,
        xkey: 'y',
        ykeys: ["a"],
        labels: ["<?= lang('total_sales') ?>"],
        xLabelMargin: 2,
        barColors: ['#0f766e'],
        resize: true,
        parseTime: false,
    });

    (function(window, document, $, undefined) {
        $(function() {
            var data = [
                <?php
                function random_color_part()
                {
                    return str_pad(dechex(mt_rand(0, 255)), 2, '0', STR_PAD_LEFT);
                }

                function random_color()
                {
                    return random_color_part() . random_color_part() . random_color_part();
                }

                if (!empty($bestselling)) :
                    foreach ($bestselling as $v_bestselling) :
                        $color = random_color();
                ?> {
                    "label": "<?= $v_bestselling->item_name ?>",
                    "color": "#<?= $color ?>",
                    "data": <?= $v_bestselling->quantity ?>
                },
                <?php
                    endforeach;
                endif;
                ?>
            ];

            var options = {
                series: {
                    pie: {
                        show: true,
                        innerRadius: 0,
                        label: {
                            show: true,
                            radius: 0.8,
                            formatter: function(label, series) {
                                return '<div class="flot-pie-label">' + Math.round(series.percent) + '%</div>';
                            },
                            background: {
                                opacity: 0.8,
                                color: '#222'
                            }
                        }
                    }
                }
            };

            var chart = $('.chart-pie');
            if (chart.length) {
                $.plot(chart, data, options);
            }
        });
    })(window, document, window.jQuery);
});
</script>
