<div class="wrapper wrapper-content">
    <div class="row">
        <div class="ibox float-e-margins">
            <div class="col-lg-12">
                <div class="ibox-title">
                    <span style="height: 25px;" class="label label-warning "><h5>COAL GETTING DASHBOARD</h5></span>
                </div>
                <div class="ibox-content">
                    <div class="row">
                        <form autocomplete="off" method="post" id="form_filter" class="form-horizontal">
                            <div class="col-lg-6">
                                <div class="row">
                                    <div class="form-group" id="daterange">
                                        <label class="col-sm-2 control-label">Periode</label>    
                                        <div class="col-sm-8">
                                            <div class="input-daterange input-group col-sm-12" id="datepicker">
                                                <input id="filter_date_start" type="text" class="input-sm form-control" name="t_filter_date_start" value="01<?= date('-m-Y') ?>" />
                                                <span class="input-group-addon">to</span>
                                                <input id="filter_date_end" type="text" class="input-sm form-control" name="t_filter_date_end" value="<?= date('d-m-Y') ?>" />
                                            </div>
                                        </div>
                                        <div class="col-sm-2">
                                            <button class="btn btn-success btn-xs" type="button" onclick=""><i class="fa fa-search"></i> Refresh</button>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <!-- chart by day  -->
                                     <h5><strong>By Day</strong></h5>
                                    <div>
                                        <canvas id="lineChart" height="100"></canvas>
                                    </div>
                                </div>                                
                            </div>
                            <div class="col-lg-6">
                                <div class="row"></div><br><br>
                                <div class="row">
                                    <!-- chart by month  -->
                                    <h5><strong>By Month</strong></h5>
                                    <div>
                                        <canvas id="lineChart2" height="100"></canvas>
                                    </div>
                                </div>
                            </div>
                        </form>                         
                    </div>
                </div>
            </div>            
        </div>
    </div> <br>
    <div class="row">
        <div class="ibox float-e-margins">
            <div class="col-lg-4">
                <div class="ibox-title">
                    <h5>TOTAL</h5>
                </div>
                <div class="ibox-content">   
                    <div class="row">
                        <div class="col-sm-3"><h4>Volume</h4></div>
                        <div class="col-sm-1"><h4>:</h4></div>
                        <div class="col-sm-3" style="text-align:right;"><h4>10.000</h4></div>
                        <div class="col-sm-3"><h4>Ton's</h4></div>
                    </div>
                    <div class="row">
                        <div class="col-sm-3"><h4>Productivity</h4></div>
                        <div class="col-sm-1"><h4>:</h4></div>
                        <div class="col-sm-3" style="text-align:right;"><h4>1000</h4></div>
                        <div class="col-sm-3"><h4>Ton's / days</h4></div>
                    </div>
                </div>
            </div>            
            <div class="col-lg-8">
                <div class="ibox-title">
                    <h5>GROWTH</h5>
                </div>
                <div class="ibox-content">
                    <h5>COAL GETTING (in Ton's)</h5>
                    <div class="table-responsive">
                        <table class="table table-bordered" style="width:100%;">
                            <thead>
                                <tr>
                                    <th rowspan="2" style="vertical-align:middle; text-align:center;">Periode</th>
                                    <th colspan="3" style="vertical-align:middle; text-align:center;">Total</th>
                                    <th colspan="3" style="vertical-align:middle; text-align:center;">Average / Hour</th>
                                </tr>
                                <tr>
                                    <th style="vertical-align:middle; text-align:center;">Current</th>
                                    <th style="vertical-align:middle; text-align:center;">Previous</th>
                                    <th style="vertical-align:middle; text-align:center;">Growth</th>
                                    <th style="vertical-align:middle; text-align:center;">Current</th>
                                    <th style="vertical-align:middle; text-align:center;">Previous</th>
                                    <th style="vertical-align:middle; text-align:center;">Growth</th>
                                </tr>   
                            </thead>
                            <tbody>
                                <tr>
                                    <td>Today (vs Yesterday)</td>
                                    <td style="text-align:right;">25,000</td>
                                    <td style="text-align:right;">22,500</td>
                                    <td style="text-align:right;">11.1 %</td>
                                    <td style="text-align:right;">1,042</td>
                                    <td style="text-align:right;">948</td>
                                    <td style="text-align:right;">9.9 %</td>
                                </tr>
                                <tr>
                                    <td>This Week (vs Last Week)</td>
                                    <td style="text-align:right;">210,000</td>
                                    <td style="text-align:right;">245,700</td>
                                    <td style="text-align:right;">-14.5 %</td>
                                    <td style="text-align:right;">1,250</td>
                                    <td style="text-align:right;">1,513</td>
                                    <td style="text-align:right;">-17.4 %</td>
                                </tr>
                                <tr>
                                    <td>This Month (vs Last Month)</td>
                                    <td style="text-align:right;">720,750</td>
                                    <td style="text-align:right;">612,638</td>
                                    <td style="text-align:right;">17.6 %</td>
                                    <td style="text-align:right;">969</td>
                                    <td style="text-align:right;">785</td>
                                    <td style="text-align:right;">23.5 %</td>
                                </tr>
                                <tr>
                                    <td>This Year (vs Last Year)</td>
                                    <td style="text-align:right;">10,350,000</td>
                                    <td style="text-align:right;">9,522,000</td>
                                    <td style="text-align:right;">8.7 %</td>
                                    <td style="text-align:right;">1,198</td>
                                    <td style="text-align:right;">1,150</td>
                                    <td style="text-align:right;">4.2 %</td>
                                </tr>        
                            </tbody>
                            <tfoot></tfoot>
                        </table>
                    </div>
                </div>
            </div>            
        </div>        
    </div>
</div>

<script>
    $(document).ready(function(){
       
        var lineData = {
        labels: [ 1,2,3,4,5,6,7,8,9,10 ],
        datasets: [

            {
                label: "Total Volume (Ton)",
                // backgroundColor: 'rgba(255, 255, 255, 0.52)',
                backgroundColor: "rgba(26,179,148,0.5)",
                borderColor: "rgba(26,179,148,0.7)",
                data: [ 500,30,20,500,50,100,60,150,90,30 ]
            }
        ]
        };

        var lineOptions = {
            responsive: true
        };

        var ctx = document.getElementById("lineChart").getContext("2d");
        new Chart(ctx, {type: 'line', data: lineData, options:lineOptions});


        var lineData = {
        labels: [ 1,2,3,4,5,6,7,8 ],
        datasets: [

            {
                label: "Total Volume (Ton)",
                // backgroundColor: 'rgba(255, 255, 255, 0.52)',
                backgroundColor: 'rgba(240, 128, 128, 0.5)',
                borderColor: "#ed5565",
                data: [ 5000,200,1000,500,3000,1000,300,100 ]
            }
        ]
        };

        var lineOptions = {
            responsive: true
        };

        var ctx = document.getElementById("lineChart2").getContext("2d");
        new Chart(ctx, {type: 'line', data: lineData, options:lineOptions});

    });

    
</script>    
