<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('department') . ' ?' ?></label>
                    <input type="hidden" id="Branch_ID" class="full-width Branch_ID" name="Branch_ID" />
                </div>
                <div class="col-md-3">
                    <label><?php echo CommonLanguage::getMessage('nssf') . ' ?' ?></label>
                    <select id="is_nssf" class="full-width" data-init-plugin="select2" name="is_nssf" >
                        <option value=""><?php echo CommonLanguage::getMessage('All') ?></option>
                        <option value="1"><?php echo CommonLanguage::getMessage('yes') ?></option>
                        <option value="0"><?php echo CommonLanguage::getMessage('no') ?></option>
                    </select>
                </div>
                <div class="col-md-3">
                    <label><?php echo CommonLanguage::getMessage('still_working') . ' ?' ?></label>
                    <select id="is_working" class="full-width" data-init-plugin="select2" name="is_working" >
                        <option value=""><?php echo CommonLanguage::getMessage('All') ?></option>
                        <option value="1" selected><?php echo CommonLanguage::getMessage('yes') ?></option>
                        <option value="0"><?php echo CommonLanguage::getMessage('no') ?></option>
                    </select>
                </div>
                <div class="col-md-3">
                    <label><?php echo CommonLanguage::getMessage('employee_type') ?></label>
                    <select id="employee_type_filter" class="full-width" data-init-plugin="select2">
                        <option value=""><?php print CommonLanguage::getMessage('select'); ?></option>
                        <option value="1"><?php print CommonLanguage::getMessage('IS_Employee'); ?></option>
                        <option value="0"><?php print CommonLanguage::getMessage('not_IS_Employee'); ?></option>
                        <option value="2"><?php print CommonLanguage::getMessage('sign_emp'); ?></option>
                        <option value="3"><?php print CommonLanguage::getMessage('temp_emp'); ?></option>
                        <option value="5"><?php print CommonLanguage::getMessage('daily_emp'); ?></option>
                        <option value="4"><?php print CommonLanguage::getMessage('retired_emp'); ?></option>
                    </select>
                </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('work_id'); ?></th>
                                <th class="text-center" ><?php print CommonLanguage::getMessage('Name'); ?></th>
                                <th class="text-center" ><?php print CommonLanguage::getMessage('job'); ?></th>
                                <th class="text-center" ><?php print CommonLanguage::getMessage('b_salary'); ?>  </th>
                                <th class="text-center" ><?php print CommonLanguage::getMessage('unit_time'); ?>  </th>
                                <th class="text-center" ><?php print CommonLanguage::getMessage('payment_period'); ?>  </th>
                                <th class="text-center" ><?php print CommonLanguage::getMessage('Action'); ?>  </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($('#Branch_ID'), 'HRMAjax/searchDepartment');
            $("#Branch_ID,#is_nssf,#is_working,#employee_type_filter").on("change", function () {
                ChangeTable()
            });
        });
    function ChangeTable() {
        RebuildDataTable(title, [0], "HRMAjax/payroll_list", {is_actual: is_actual, branch_id: $("#Branch_ID").val(),
            is_nssf: $("#is_nssf").val(),is_working : $("#is_working").val(),emp_type:$("#employee_type_filter").val()})
    }
</script>