<div class="col-xs-12 col-md-6">
<div class="well with-header with-footer">
    <div class="header bordered-azure">
    <i id="abc_spinner" style="display: none;" class="fa fa-spinner fa-spin"></i><?php echo $this->lang->line("ABCANALYSIS"); ?>
    </div>
    
    <div class="table-scrollable">
        <table class="table table-striped table-bordered table-hover databox-text">
            <thead>
                <tr>
                    <th scope="col" style="width:40% !important">
                        <?php echo $this->lang->line("ITEM"); ?>
                    </th>
                    <th scope="col" style="text-align: center; width:15% !important">
                        <?php echo $this->lang->line("UNITS"); ?>
                    </th>
                    <th scope="col" style="text-align: center; width:25% !important">
                        <?php echo $this->lang->line("COST"); ?>
                    </th>
                    <th scope="col" style="text-align: center; width:10% !important">
                        <?php echo $this->lang->line("COST"); ?> %
                    </th>
                    <th scope="col" style="text-align: center; width:10% !important">
                        <?php echo $this->lang->line("CLASS"); ?>
                    </th>

                </tr>
            </thead>
            <tbody id="abcanalysis">


            </tbody>
        </table>
        <div class="footer" id="abcsummary">
        
    </div>
    </div>

</div>

</div>

<script>

    $(document).ready(function() {
    $("#abc_spinner").show();
        $.ajax({ url: "<?= base_url() ?>dashboard/databoxes/abcanalysis",
                    data: { count: <?= $count ?>, days: <?= $days ?> },
                    dataType: "json",
                    type: "POST",
                    success: function(data){
                        var html = '';
                var len = data.length;
                var abcpct=100;
                for (var i = 0; i< len; i++) {
                 
            html+="<tr style='font-size: 12px'>"+
                     "<td>"+data[i].name+"</td>"+
                    "<td style='text-align: center'>"+data[i].units+"</td>"+
                    "<td style='text-align: right'>"+data[i].cost+"</td>"+
                    "<td style='text-align: center'>"+data[i].costpct+"%</td>";
            if(abcpct>20) html+="<td style='text-align: center'>A</td>";
            else if(abcpct>5) html+="<td style='text-align: center'>B</td>";
            else html+="<td style='text-align: center'>C</td>";
            html+="</tr>";
            abcpct = abcpct - data[i].costpct;
                }
                $("#abcanalysis").append(html);
                if (typeof data[0] !== 'undefined') {
                    $("#abcsummary").append('<?php echo $this->lang->line("CLASS"); ?> <code>'+ i +'</code> <?php echo $this->lang->line("PRODUCTBASEDONLAST"); ?> <code>'+ <?= $days ?>+'</code> <?php echo $this->lang->line("DAYSDATA"); ?> <?php echo $this->lang->line("TOTALCOST"); ?> <code>'+data[0].totalcost)+'</code>';
                }
                $("#abc_spinner").hide();
                    }
                });
    
});
</script>