<style>
    .table thead tr >th{
        background-color: #652d90;
        color:#fff;
    }
    .table thead tr th[class*='sorting_'] {
        color: #FFFFFF;
    }
    .bg-master-lighter {
        border:none;
        background-color:#fff;
        border-top:1px solid #ddd; 
    }
    .datepicker thead tr .dow {
        color:#4c0870 !important;
    }
    .datepicker table tr td.day:hover {
        background: #4c0870 !important;
        color:#fff;
    }
    .datepicker table tr td.active {
        background-color: #4c0870 !important;
    }
    .datepicker thead tr .datepicker-switch {
        color: #4c0870  !important;
        font-size: 13px;
    }
    .datepicker table tr td span.active {
        background-color: #4c0870 !important;
    }
    .datepicker table tr td span:hover {
        background-color: #4c0870 !important;
        color:#fff;
    }
    datepicker thead tr .next:before, .datepicker thead tr .prev:before {
        color: #4c0870 !important;
        font-family: 'FontAwesome';
        font-size: 10px;
    }
    .datepicker thead tr .next:before, .datepicker thead tr .prev:before {
        color: #4c0870 !important;
        font-family: 'FontAwesome';
        font-size: 10px;
    }
</style>
<div class="container-fluid container-fixed-lg bg-white">
    <div class="panel panel-transparent">
        <div class="panel-heading">
            <div class="panel-title"> <?php print CommonLanguage::getMessage('vehicle_expense_list'); ?></div>
            <div class="row">
                <div class="col-md-4">
                    <label><?php print CommonLanguage::getMessage('Date'); ?></label>
                    <div id="Date_Group" class="form-group  input-group " >
                        <span class="input-group-addon bg-success-darker"><i class="fa fa-calendar"></i></span>
                        <input id="Expense_Date" name="Expense_Date" class="form-control"  aria-required="true" aria-invalid="false">
                    </div>
                </div>
                <div class="col-md-3">
                    <label><?php  echo CommonLanguage::getMessage('vehicle_name');?></label>
                    <input type="hidden" name="vehicle_id" id="vehicle_id" class="full-width"/>
                </div>
                <?php 
                if ($permissions->hasPermission("add_truck_expense") ) {
                    ?>
                    <div class="col-md-2 pull-right">    
                        <div class="floatingContainer ">
                            <a href="Garage/VehicleExpenses" >
                                <div class="actionButton" style="    background-color: #4c0870;">
                                    <p class="floatingText"><span class="floatingTextBG"><?php echo CommonLanguage::getMessage('add') ?></span></p>
                                </div>
                            </a>
                        </div>
                    </div>
                <?php } ?>
            </div>
            <div class="clearfix"></div>
        </div>
        <div class="panel-body">
            <table class="table table-bordered table-hover demo-table-search" id="tableWithSearch" >
                <thead>
                    <tr>
                        <th class="text-center"><?php print CommonLanguage::getMessage('vehicle_name'); ?></th>
                        <th class="text-center"><?php print CommonLanguage::getMessage('description'); ?></th>
                        <th class="text-center"  ><?php print CommonLanguage::getMessage('Date'); ?></th>
                        <th class="text-center" ><?php print CommonLanguage::getMessage('amount'); ?></th>
                        <th class="text-center" ><?php print CommonLanguage::getMessage('Action'); ?></th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
</div>
<script>
    var title = <?php echo json_encode(CommonLanguage::getMessage('vehicle_expense_list')); ?>;
    var startDate = today, endDate = today;
    $(function () {
        changeTable();
        build_select2($("#vehicle_id"), "xhr/CommonSearch?col_id=Vehicle_ID&col_name=Vehicle_Name&table=tbl_garage_vehicle"); 
        $('#Expense_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");
            changeTable()
        });
        $("#vehicle_id").on('change',function(){
            changeTable();
        })
        $('#tableWithSearch').on('click', '.delete', function () {
            var entry_value = $(this).parents('div.Action').attr('data-id');
            IncludeDeleteModal(common_delete_modal, {expense_id: entry_value}, function () {
                changeTable()
            }, "GarageAjax/deleteVehicleExpense");
        });
    });
    function changeTable(){
        RebuildDataTable(title, [0, 1, 2, 3], 'GarageAjax/VehicleExpenseListRequest?from_date=' + startDate + '&to_date=' + endDate,{vehicle_id: $("#vehicle_id").val()});
    }
</script>