<style>
    .table thead tr >th{
        background-color:#652d90;
        color:#fff;
    }
</style>
<div class="wrapper">
    <div class="panel">
        <div class="panel-heading">
            <div class="panel-title"> <?php print CommonLanguage::getMessage('fuel_consumption_list'); ?></div>
        </div>
        <div class="panel-body">
            <div class="row form-group">
                <label class=""><?php print CommonLanguage::getMessage('Date'); ?></label>
                <div id="Date_Group" class="form-group  input-group col-md-3 " >
                    <span class="input-group-addon bg-success-darker"><i class="fa fa-calendar"></i></span>
                    <input id="Fuel_Date" name="Fuel_Date" class="form-control"  aria-required="true" aria-invalid="false">
                </div>
            </div>
            <div class="row">
                <div class="col-md-12" id="MyTable" >
                    <div class="table-responsive">
                        <table class="table table-hover demo-table-search" id="tableWithSearch" >
                            <thead>
                                <tr>
                                    <th class="text-center" style="width:10%"><?php print CommonLanguage::getMessage('vehicle'); ?></th>
                                    <th class="text-center" style="width:5%" ><?php print CommonLanguage::getMessage('fuel_per_km'); ?></th>
                                    <th class="text-center" style="width:10%"><?php print CommonLanguage::getMessage('distance'); ?></th>
                                    <th class="text-center" style="width:5%" ><?php print CommonLanguage::getMessage('fuel_consumption'); ?></th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    var title = <?php echo json_encode(CommonLanguage::getMessage('fuel_consumption_list')); ?>;
    var startDate = today, endDate = today;
    $(function () {
        RebuildDataTable(title, [0, 1, 2, 3], 'GarageAjax/FuelListRequest');
        $('#Fuel_Date').daterangepicker({locale: {
            format: 'YYYY-MM-DD'
        }, ranges: {
            'Today': [moment(), moment()],
            'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
            'Last 7 Days': [moment().subtract(6, 'days'), moment()],
            'Last 30 Days': [moment().subtract(29, 'days'), moment()],
            'This Month': [moment().startOf('month'), moment().endOf('month')],
            'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
        },
                                        }, function (start, end, label) {
            window.startDate = start.format("YYYY-MM-DD"),
                window.endDate = end.format("YYYY-MM-DD");
            RebuildDataTable(title, [0, 1, 2, 3], 'GarageAjax/FuelListRequest?from_date=' + startDate + '&to_date=' + endDate);
        });
    });
</script>