<div class="wrapper">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <div class="pull-right m-t-15">                    
                    <form method="Post" action="<?php echo base_url()."salesdashboard";?>">
                        <div id="reportrange" name="reportrange" class="form-control" style="display:inline">
                           <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
                           <span></span>
                           
                        </div>
                        
                        <input type="hidden" name="startdate" id="startdate" value="<?php echo $startdate;?>"><input type="hidden" name="enddate" id="enddate" value="<?php echo $enddate;?>">
                        <button type="submit" class="btn btn-sm btn-pink btn-bordred waves-effect w-md waves-light m-l-5">Run</button>   
                    </form>
                </div>
                <h4 class="page-title">Sales Dashboard</h4>
            </div>
        </div>
        <div class="row">
             <div class="col-md-12 col-sm-12">
                <div class="panel panel-custom panel-border">
                    <div class="panel-heading">
                        <h3 class="panel-title">Total Bills</h3>
                    </div>
                    <div class="panel-body" style="text-align: center;">
                        <h2><?php echo $totalbills->totalbills;?> Bills </h2>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
           
            <div class="col-md-2 col-sm-2">
                <div class="panel panel-success panel-border">
                    <div class="panel-heading">
                        <h3 class="panel-title">Collection =</h3>
                    </div>
                    <div class="panel-body" style="text-align: center;">
                        <h2 style="font-size:20px;"><?php echo CURRENCY_CODE;?>. <?php echo number_format(($totalbills->paid - $totalbills->invoice_tax - $totalbills->invoice_cc_charge) + $totalbills->tax_total + $advance->advance + $totalbills->retained + $vouchers->vouchers + $totalbills->cc_charge, 2);?></h2>
                    </div>
                </div>
            </div>
            
            <div class="col-md-2 col-sm-2">
                <div class="panel panel-custom panel-border">
                    <div class="panel-heading">
                        <h3 class="panel-title">Invoice Receiving</h3>
                    </div>
                    <div class="panel-body" style="text-align: center;">
                        <h2 style="font-size:20px;"><?php echo CURRENCY_CODE;?>. <?php echo number_format($totalbills->paid - $totalbills->invoice_tax - $totalbills->invoice_cc_charge,2);?></h2>
                    </div>
                </div>
            </div>
            <div class="col-md-2 col-sm-2">
                <div class="panel panel-custom panel-border">
                    <div class="panel-heading">
                        <h3 class="panel-title">+ Sales Tax </h3>
                    </div>
                    <div class="panel-body" style="text-align: center;">
                        <h2 style="font-size:20px;"><?php echo CURRENCY_CODE;?> <?php echo number_format($totalbills->tax_total,2);?> </h2>
                    </div>
                </div>
            </div>
            <div class="col-md-2 col-sm-2">
                <div class="panel panel-custom panel-border">
                    <div class="panel-heading">
                        <h3 class="panel-title">+ Advances</h3>
                    </div>
                    <div class="panel-body" style="text-align: center;">
                        <h2 style="font-size:20px;"><?php echo CURRENCY_CODE;?>. <?php if($advance->advance == null){echo 0;}else{echo number_format($advance->advance+$totalbills->retained,2);}?>  (<?php if($totalbills->advance_adj==null){echo 0;}else{echo number_format($totalbills->advance_adj,2);}?>)</h2>
                    </div>
                </div>
            </div>
            
            <div class="col-md-2 col-sm-2">
                <div class="panel panel-custom panel-border">
                    <div class="panel-heading">
                        <h3 class="panel-title">+ Gift Vouchers</h3>
                    </div>
                    <div class="panel-body" style="text-align: center;">
                        <h2 style="font-size:20px;"><?php echo CURRENCY_CODE;?>. <?php if($vouchers->vouchers == null){ echo '0';} else{echo number_format($vouchers->vouchers,2);}?></h2>
                    </div>
                </div>
            </div>
            <div class="col-md-2 col-sm-2">
                <div class="panel panel-danger panel-border">
                    <div class="panel-heading">
                        <h3 class="panel-title">CC Fee</h3>
                    </div>
                    <div class="panel-body" style="text-align: center;">
                        <h2 style="font-size:20px;"><?php echo CURRENCY_CODE;?>. <?php if($totalbills->cc_charge == null){ echo '0';} else{echo number_format($totalbills->cc_charge,2);}?></h2>
                    </div>
                </div>
            </div>
           
            
        </div>
        <div class="row">
            <div class="col-lg-2 col-md-2 col-sm-2">
                <div class="card-box widget-user bg-danger" >
                    <div class="text-center">
                        <h3 class="text-white" ><?php  if($canceledbills->canceledbills == null){ echo '0';} else { echo $canceledbills->canceledbills;}?></h3>
                        <h5 class="text-white">Cancelled Bill Count</h5>
                    </div>
                </div>
            </div>
            <div class="col-lg-2 col-md-2 col-sm-2">
                <div class="card-box widget-user bg-danger" >
                    <div class="text-center">
                        <h3 class="text-white" ><?php echo CURRENCY_CODE;?>.<?php if($canceledbills->paid == null){ echo '0';} else { echo number_format($canceledbills->paid,2);} ?></h3>
                        <h5 class="text-white">Cancelled Bill Value</h5>
                    </div>
                </div>
            </div>
            <div class="col-lg-2 col-md-2 col-sm-2">
                <div class="card-box widget-user bg-danger" >
                    <div class="text-center">
                        <h3 class="text-white" ><?php echo CURRENCY_CODE;?>. <?php if($discounts == null){ echo '0';} else{ echo number_format($discounts,2);}?></h3>
                        <h5 class="text-white">Discounts</h5>
                    </div>
                </div>
            </div>
            <div class="col-lg-2 col-md-2 col-sm-2">
                <div class="card-box widget-user bg-custom" >
                    <div class="text-center">
                        <h3 class="text-white" ><?php echo CURRENCY_CODE;?>. <?php if($totalbills->balance == null){echo 0;} else {echo number_format($totalbills->balance,2);}?></h3>
                        <h5 class="text-white">Unpaid Amount</h5>
                    </div>
                </div>
            </div>
            <div class="col-lg-2 col-md-2 col-sm-2">
                <div class="card-box widget-user bg-custom" >
                    <div class="text-center">
                        <h3 class="text-white" ><?php echo CURRENCY_CODE;?>. <?php  if($totalbills->retained == null){echo '0';} else { echo number_format($totalbills->retained,2);}?></h3>
                        <h5 class="text-white">Retained Amount</h5>
                    </div>
                </div>
            </div>
            <div class="col-lg-2 col-md-2 col-sm-2">
                <div class="card-box widget-user bg-warning" >
                    <div class="text-center">
                        <h3 class="text-white" ><?php if($totalbills->loyalty_earned == null){echo '0';} else { echo number_format($totalbills->loyalty_earned,2);}?></h3>
                        <h5 class="text-white">Loyalty Points Value</h5>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="row">
           
            <div class="col-md-4 col-sm-4">
                <div class="panel panel-success panel-border">
                    <div class="panel-heading">
                        <h3 class="panel-title">Cash</h3>
                    </div>
                    <div class="panel-body" >
                        <div class="row">
                            
                            <div class="col-md-8">
                                <h3><?php echo CURRENCY_CODE;?>. <?php echo number_format($payment_breakup->totalCash + $payment_breakup->voucherCash,2);?></h3>
                            </div>
                        </div>
                        
                    </div>
                </div>
            </div>
            <div class="col-md-4  col-sm-4">
                <div class="panel panel-primary panel-border">
                    <div class="panel-heading">
                        <h3 class="panel-title">Card</h3>
                    </div>
                    <div class="panel-body" >
                        <div class="row">
                            
                            <div class="col-md-8">
                                <h3><?php echo CURRENCY_CODE;?>. <?php echo number_format($payment_breakup->totalCard + $payment_breakup->voucherCard,2);?></h3>
                            </div>
                        </div>                            
                    </div>
                </div>
            </div>
            <div class="col-md-4  col-sm-4">
                <div class="panel panel-info panel-border">
                    <div class="panel-heading">
                        <h3 class="panel-title">Bank</h3>
                    </div>
                    <div class="panel-body" >
                        <div class="row">
                            
                            <div class="col-md-8">
                                <h3><?php echo CURRENCY_CODE;?>. <?php echo number_format($payment_breakup->totalCheck+ $payment_breakup->voucherCheck,2);?></h3>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
             <div class="col-md-12 col-sm-12">
                <div class="panel panel-danger panel-border">
                    <div class="panel-heading">
                        <h3 class="panel-title">Balances</h3>
                    </div>
                    <div class="panel-body" style="text-align: center;">
                        <h2 style="font-size:20px;"><?php echo CURRENCY_CODE;?>. <?php if($totalbills->balance==null){echo '0';} else { echo number_format($totalbills->balance,2);} ?></h2>
                    </div>
                </div>
            </div>
            
             <div class="col-md-12 col-sm-12">
                <div class="panel panel-danger panel-border">
                    <div class="panel-heading">
                        <h3 class="panel-title">Total Expense</h3>
                    </div>
                    <div class="panel-body" style="text-align: center;">
                        <h3><?php echo CURRENCY_CODE;?>. <?php if($expenses->expense == null){echo '0';} else { echo number_format($expenses->expense,2);}?></h3>
                    </div>
                </div>
            </div>
        </div>    
        
        <div class="row">
            <div class="col-md-6  col-sm-6">
                <div class="panel panel-warning panel-border">
                    <div class="panel-heading">
                        <h3 class="panel-title">Service Break-Up</h3>
                    </div>
                    <div class="panel-body" style="text-align: center;">
                        <div id="grossing_services">
                            
                        </div>
                    </div>
                </div>
            </div>
            
            
            <div class="col-md-6  col-sm-6">
                <div class="panel panel-pink panel-border">
                    <div class="panel-heading">
                        <h3 class="panel-title">Bill Items</h3>
                    </div>
                    <div class="panel-body" style="text-align: center;">
                        <div id="billitems">
                            
                        </div>
                    </div>
                </div>
            </div>
            
        </div>
    </div>
        
        
<script>
   
   
     
    $(document).ready(function() {
         
         var startdate = '<?php echo date('F j, Y', strtotime($startdate)); //->format('F j, Y');    ?>';
        var enddate = '<?php echo date('F j, Y', strtotime($enddate)); //->format('F j, Y');    ?>';
        $('#reportrange span').html(startdate + ' - ' + enddate);
        
        $('#reportrange').daterangepicker({
            format: 'MM/DD/YYYY',
            startDate: moment().subtract(15, 'days'),
            endDate: moment(),
            minDate: '01/01/2012',
            maxDate: '12/31/2090',
                    dateLimit: {
                        days: 183
                    },
            showDropdowns: true,
            showWeekNumbers: true,
            timePicker: false,
            timePickerIncrement: 1,
            timePicker12Hour: true,
            ranges: {
                'Today': [moment()],
                'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                'Last 7 Days': [moment().subtract(6, 'days'), moment().add(1, 'days')],
                'Last 30 Days': [moment().subtract(29, 'days'), moment().add(1, 'days')],
                'This Month': [moment().startOf('month'), moment().endOf('month')],
                'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
            },
            opens: 'left',
            drops: 'down',
            buttonClasses: ['btn', 'btn-sm'],
            applyClass: 'btn-success',
            cancelClass: 'btn-default',
            separator: ' to ',
            locale: {
                applyLabel: 'Submit',
                cancelLabel: 'Cancel',
                fromLabel: 'From',
                toLabel: 'To',
                customRangeLabel: 'Custom',
                daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
                monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
                firstDay: 1
            }
        }, function(start, end, label) {
            //console.log(start.toISOString(), end.toISOString(), label);
            startdate = start;
            enddate = end;
            $("#startdate").val(startdate.format('YYYY-MM-DD'));
            $("#enddate").val(enddate.format('YYYY-MM-DD'));
            $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
        });
        
        billitems(<?php echo $billitems;?>);
        grossing_services();
    });
    
    function billitems(mData){
       // console.log(mData);
        Highcharts.getOptions().plotOptions.pie.colors = (function () {
            var colors = [],
                    base = '#ff8acc', //Highcharts.getOptions().colors[0],
                    i;

            for (i = 0; i < 10; i += 1) {
                // Start out with a darkened base color (negative brighten), and end
                // up with a much brighter color
                colors.push(Highcharts.Color(base).brighten((i - 3) / 7).get());
            }
            return colors;
        }());



        $('#billitems').highcharts({
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false,
                type: 'pie',
               
                style: {
                    fontFamily: 'Roboto, sans-serif'
                }
            },
            radius: '42%',
            innerRadius: '60%',
            credits: false,
            title: 'Bill Items',
            //            colors: ['#ff8acc',  '#71b6f9', '#fcdf9b', '#10c469', '#ffd7ed', '#99527a', '#ccff8a', '#434348', '#90ed7d', '#f7a35c', '#8085e9', 
            //                '#f15c80', '#e4d354', '#2b908f', '#f45b5b', '#91e8e1'],
           
            plotOptions: {
                series: {
                    dataLabels: {
                        enabled: true,
                        format: '{point.name}: {point.y:.1f}%'
                    }
                }
            },

            tooltip: {
                headerFormat: '<span style="font-size:11px;word-wrap: break-word;">{series.name}</span><br>',
                pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.paid:.2f}</b><br/>'
            },
            series: [{
                    name: 'BillItems',
                    colorByPoint: true,
                    data: mData
                }]
        });
        
        
        
        
        
        
    }
    
    function grossing_services(){
        var mData=[];
        var total=0;
        $.ajax({
            type: "POST",
            url: "<?php echo base_url();?>salesdashboard_controller/grossing_services",
             data: {  startdate:  $("#startdate").val(), enddate:  $("#enddate").val()},
            dataType: "json",
            cache: false,
            async: true,
            success: function(data) { //$("#cook").val(data['csrf_hash']);
               //console.log(data);
                
                for (x = 0; x < data.length; x++) {
                    //var mObject = {name: data[x]['name'], y: parseFloat(data[x]['y'])};
                    var mObject = {name: data[x]['name'].substring(0,29), y: parseFloat(data[x]['y']), x: parseFloat(data[x]['amount'])};
                    
                    mData[x]=mObject;
                    total = data[x]['paid'];
                } 
                draw_grossing_services(mData, total);
            }

        });
    }
    
     function draw_grossing_services(mData, total){
    
    
        Highcharts.getOptions().plotOptions.pie.colors = (function () {
            var colors = [],
                base = '#f9c851',//Highcharts.getOptions().colors[0],
                i;

            for (i = 0; i < 12; i += 1) {
                // Start out with a darkened base color (negative brighten), and end
                // up with a much brighter color
                colors.push(Highcharts.Color(base).brighten((i - 3) / 14).get());
            }
            return colors;
        }());
        
         $('#grossing_services').highcharts({
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false,
                type: 'pie',
                style: {
                        fontFamily: 'Roboto, sans-serif'
                    }
            },
            credits: false,
//            colors: ['#ff8acc',  '#71b6f9', '#fcdf9b', '#10c469', '#ffd7ed', '#99527a', '#ccff8a', '#434348', '#90ed7d', '#f7a35c', '#8085e9', 
//                '#f15c80', '#e4d354', '#2b908f', '#f45b5b', '#91e8e1'],
            title: {
                text: 'Service Category Share'
            },
            subtitle: {
                text: 'Share of your Service Categories in the selected days.'
            },
            plotOptions: {
                series: {
                    dataLabels: {
                        enabled: true,
                        format: '{point.name}: {point.y:.1f}%'
                    }
                }
            },

            tooltip: {
                headerFormat: '<span style="font-size:11px; word-wrap: break-word;">{series.name}</span><br>',
                pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.x:.2f}</b><br/>'
            },
            series: [{
                name: 'Services',
                colorByPoint: true,
                data: mData
            }]
        });
    
    }
</script>