<!DOCTYPE html>
<html>
    
    <head>
        <title>Sales Statistics</title>
        <!-- Bootstrap -->
        <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
        <link href="../bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" media="screen">
        <link href="../assets/styles.css" rel="stylesheet" media="screen">
            <script src="../mycharts/Chart.min.js"></script>
    <script src="../mycharts/samples/utils.js"></script>
    <style>
    canvas{
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
    }
    </style>
        <!--[if lte IE 8]><script language="javascript" type="text/javascript" src="vendors/flot/excanvas.min.js"></script><![endif]-->
        <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
        <!--[if lt IE 9]>
            <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <script src="../vendors/modernizr-2.6.2-respond-1.1.0.min.js"></script>
    </head>
    
    <body>
        <?php include '../includes/header.php'; ?>
        <div class="container-fluid">
            <div class="row-fluid">
                 <?php include '../includes/sidebar.php'; ?>
                <!--/span-->
                <div class="span9" id="content">
                      <!-- morris stacked chart -->
                    <div class="row-fluid">
                        <!-- block -->
                        <div class="block">
                            <div class="navbar navbar-inner block-header">
                                <div class="span12">
                                <div class="muted pull-left" class="span4">Monthly Sales Analysis</div>
                                <div align="right" class="span8"><a href="sales_graph.php"><button class="btn btn-info"><i class="icon-hand-left icon-white"> </i>Back</button></a></div>
                                </div>
                            </div>
                            <div>
                                <form method="POST" action="">
                                    <label>By Staff</label>
                                            <select name="staff" class="form-control"   required="required" >
                                            <option value="" selected="" disabled="">Select Staff</option>
                                                
                                            <?php
                                            include '../includes/connection.php';
                                            $sql = "SELECT * FROM staff where branch_id='$branch'";
$result = mysqli_query($conn, $sql);

if (mysqli_num_rows($result) > 0) {
    // output data of each row
    while($row = mysqli_fetch_assoc($result)) {
        ?>
<option value="<?php echo $row['staff_code']; ?>"><?php echo $row['full_name']; ?></option>
        <?php
    }
} else {
    echo "0 results";
}
?>
                                            </select>
                                            <button type="submit" name="filter" class="btn btn-info"><li class="fa fa-filter">filter</li></button>
                                </form>
                            </div>
                            <div class="block-content collapse in">
                                <div class="span12">
                                    <div style="height: 50%;">
                                        <canvas id="canvas"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /block -->
                    </div>

    



                   

                  


                </div>
            </div>
            <hr>
            <?php include '../includes/footer.php'; ?>
        </div>

<?php
if (isset($_POST['filter'])) {
  $staff=$_POST['staff'];
$sen=mysqli_fetch_assoc(mysqli_query($con,"select full_name from staff where staff_code='$staff'"));
$staffname=$sen['full_name'];
$mdate=date("Y");
$sql = "SELECT DATE_FORMAT(date_time, '%m')as month, min(DATE_FORMAT(date_time, '%m'))as minmonth, sum(total_price)as sales FROM sales where DATE_FORMAT(date_time, '%Y')='$mdate' && staff='$staff' group by DATE_FORMAT(date_time, '%m')";
$sql2="SELECT min(DATE_FORMAT(date_time, '%m'))as minmonth FROM sales where DATE_FORMAT(date_time, '%Y')='$mdate' && staff='$staff' group by DATE_FORMAT(date_time, '%m')";
$result = mysqli_query($conn, $sql);
$result2 = mysqli_query($conn, $sql2);

if (mysqli_num_rows($result) > 0) {
    $arr=array();
   // $arrmonths=array();
    $rowx = mysqli_fetch_assoc($result2);
    $minmonth=$rowx['minmonth'];
    for($mon=0; $mon<=$minmonth-1; $mon++){
        $arr[$mon]=0;
        $aa=$mon;
    }



    
   $nn=$aa;    
    while($row = mysqli_fetch_assoc($result)) {
        $arr[$nn]=$row['sales'];
        
        //$arrmonths[$mon]=$row['month'];
        $nn++;
        //$mon++;

    }
    //$arr=array();
   implode(", ",$arr);
} else {
    echo "0 results";
}
}
?>    


        <!--/.fluid-container-->
        <script>
        var MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];

        var config = {
            type: 'line',
            data: {
                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July','August','September', 'October', 'November', 'December'],
                datasets: [{
                    label: 'Total Sales',
                    backgroundColor: window.chartColors.blue,
                    borderColor: window.chartColors.blue,
                    data: <?php echo "[".implode(", ",$arr)."]"; ?>,
                    fill: false,
                }]
            },
            options: {
                responsive: true,
                title: {
                    display: true,
                    text: '<?php echo "Sale made by ".$staffname."(".$staff.")"; ?>'
                },
                tooltips: {
                    mode: 'index',
                    intersect: false,
                },
                hover: {
                    mode: 'nearest',
                    intersect: true
                },
                scales: {
                    xAxes: [{
                        display: true,
                        scaleLabel: {
                            display: true,
                            labelString: 'Month'
                        }
                    }],
                    yAxes: [{
                        display: true,
                        scaleLabel: {
                            display: true,
                            labelString: 'Sales (UGX)'
                        }
                    }]
                }
            }
        };

        window.onload = function() {
            var ctx = document.getElementById('canvas').getContext('2d');
            window.myLine = new Chart(ctx, config);
        };

        

      
    </script>
        <link rel="stylesheet" href="../vendors/morris/morris.css">


        <script src="../vendors/jquery-1.9.1.min.js"></script>
        <script src="../vendors/jquery.knob.js"></script>
        <script src="../vendors/raphael-min.js"></script>
        <script src="../vendors/morris/morris.min.js"></script>

        <script src="../bootstrap/js/bootstrap.min.js"></script>
        <script src="../vendors/flot/jquery.flot.js"></script>
        <script src="..//flot/jquery.flot.categories.js"></script>
        <script src="../vendors/flot/jquery.flot.pie.js"></script>
        <script src="../vendors/flot/jquery.flot.time.js"></script>
        <script src="../vendors/flot/jquery.flot.stack.js"></script>
        <script src="../vendors/flot/jquery.flot.resize.js"></script>

        <script src="../assets/scripts.js"></script>
        
    </body>

</html>