<style>
    .table thead tr >th{
        background-color:#4c0870;
        color:#fff;
    }
    .table thead tr th[class*='sorting_'] {
        color: #fff;
    }
    .bg-master-lighter {
        border:none;
        background-color:#fff;
        border-top:1px solid #ddd;  
    }
    .ViewModeLabel{
        width: 80px;
        display: inline-block;
    }
    #DatePickerContainer > .form-group{
        width:268px;
    }
    /*
    #Pay_Slip_Year,#Pay_Slip_Month{
    display:none;
    }
    */
    .btn-group  .active{
        background-color:#4c0870!important;
        color:#fff;
    }
    .btn-default{
        border: none;
        background-color: #eee;
    }
    .btn-default:hover{
        background-color:#4c0870!important;
        color:#fff;
        border: none;
    }
    .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>
<script>
    function AddCommas(val) {
        val = parseFloat(val.toString()).toString();
        while (/(\d+)(\d{3})/.test(val.toString())) {
            val = val.toString().replace(/(\d+)(\d{3})/, '$1' + ',' + '$2');
        }
        return val.replace(/\.0$|\.00$/, "") || "0";
    }
    function FixNumber(val) {
        return AddCommas(parseFloat(val + "").toFixed(2));
    }
</script>
<script src="<?php echo THEME_PATH; ?>/plugins/moment/moment.min.js"></script>
<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('payslip_in'); ?>  <?php echo $DefaultCurrName[0]; ?></div>
        </div>
        <div class="panel-body">
            <div class="row form-group">
                <div class="col-md-3 ">
                    <label><?php echo CommonLanguage::getMessage('Barcode'); ?></label>
                    <input type="hidden" id="myBarcode" class="full-width myBarcode" name="Branch_ID" />
                </div>
                <div class="col-md-3 ">
                    <label><?php print CommonLanguage::getMessage('Employee'); ?></label>
                    <input class="Employee_ID full-width" id="Employee_ID" name="Employee_ID" type="hidden"  />
                </div>
                <div class="col-md-3 ">
                    <label><?php print CommonLanguage::getMessage('Tempalte_name'); ?></label>
                    <input class="template_id full-width" id="template_id" name="template_id" type="hidden"  />
                </div>
                <div class="col-md-3 month-div ">
                    <label><?php echo CommonLanguage::getMessage('month') ?></label>
                    <input class="month_year form-control" type="text" data-date-format="yyyy-mm" value=""  />
                </div>
                
                <div class="col-md-3 text-center" >
                    <h4></h4>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12 table-responsive">
                    <table class="table table-bordered table-hover demo-table-search" id="tableWithSearch">
                        <thead>
                            <tr>
                                <th class="text-center" ><?php print CommonLanguage::getMessage('employee_name'); ?></th>
                                <th class="text-center" ><?php print CommonLanguage::getMessage('employee_type'); ?></th>
                                <th class="text-center" ><?php print CommonLanguage::getMessage('template_name'); ?></th>
                                <th class="text-center" ><?php print CommonLanguage::getMessage('cost'); ?>  </th>
                                <th class="text-center" ><?php print CommonLanguage::getMessage('barcode'); ?>  </th>
                             </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    var title = <?php echo json_encode(CommonLanguage::getMessage('payroll')); ?>,
        is_actual = <?php echo json_encode($is_actual); ?>;
        $(function () {
            ChangeTable()
            build_select2($("#Employee_ID"), "xhr/employeeSearch" );
            build_select2($("#myBarcode"), 'xhr/commonSearch?table=tbl_production_barcode&col_id=barcode&col_name=barcode');
            build_select2($("#template_id"), 'xhr/commonSearch?table=tbl_production_template&col_id=template_id&col_name=template_name');
            $("#myBarcode,#Employee_ID,#template_id,#employee_type_filter").on("change", function () {
                 ChangeTable()
            });
            $(".month_year").datepicker({autoclose: true,
            viewMode: "months",
            minViewMode: "months"})
            $(".month_year").on("changeDate", function () {
            var date = new Date($(this).val() + '-01T12:00:00');
            var lastDay = new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
            window.startDate = $(this).val() + '-01';
            window.endDate = $(this).val() + '-' + lastDay;
            ChangeTable()
              
             
//            to_date: endDate,
//            console.log(startDate + '==' + endDate)
        })
        });
    function ChangeTable() {
        RebuildDataTable(title, [0], "HRMAjax/EmployeeProcess_list", {is_actual: is_actual, myBarcode: $("#myBarcode").val(),
            Employee_ID: $("#Employee_ID").val(),template_id : $("#template_id").val(),from_date:window.startDate,to_date:window.endDate})
    }
</script>