<style>
    .table thead tr >th{
        background-color:#4c0870;
        color:#fff;
        width: 16% !important;
    }
    .table thead tr th[class*='sorting_'] {
        color: #fff;
    }

    .table-responsive {
        overflow-x: visible; 
    }

</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('employee_leave_absence_report'); ?></div>
            <div class="clearfix"></div>

        </div>
        <div class="panel-body">
            <div class="row form-group m-b-10">
                <div class="col-md-12">
                    <div class="col-md-3  ">
                        <label><?php echo CommonLanguage::getMessage('Date') ?></label>
                        <input type="text" id="EmployeeDate" class="form-control EmployeeDate" name="EmployeeDate" />
                    </div>
                    <div class="col-md-5">
                        <label><?php echo CommonLanguage::getMessage('absence_reason') ?></label>
                        <select id="reason_filter" multiple data-init-plugin="select2" class="full-width">
                            <?php foreach ($reasons as $type) { ?>
                                <option value="<?php echo $type['Absence_Reason_ID'] ?>"><?php echo $type['Absence_Reason_Name'] ?></option>
                            <?php } ?>
                        </select>
                    </div>
                    <div class="col-md-2">
                        <button class="btn btn-success m-t-25" id="search_filter"><?php echo CommonLanguage::getMessage('search') ?></button>
                    </div>
                </div>
            </div>
            <table class="table table-bordered table-hover demo-table-search" id="tableWithSearch">
                <thead>
                <th  class="text-center"><?php print CommonLanguage::getMessage('employee_name'); ?></th>
                <th  class="text-center"><?php print CommonLanguage::getMessage('leave'); ?></th>
                <th  class="text-center"><?php print CommonLanguage::getMessage('holiday'); ?></th>
                <?php foreach ($reasons as $reason) { ?>
                    <th  class="text-center table_absence_setting_col"><?php echo $reason['Absence_Reason_Name']; ?></th>
                <?php } ?>
                <th  class="text-center"><?php print CommonLanguage::getMessage('total_absence'); ?></th>
                <th  class="text-center"><?php print CommonLanguage::getMessage('total'); ?></th>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
</div>
<script>
    var title = <?php echo json_encode(CommonLanguage::getMessage('employee_leave_absence_report')) ?>,
            startDate =<?php echo json_encode($today); ?>, endDate =<?php echo json_encode($today); ?>,
            reasons = <?php echo json_encode($reasons); ?>,
            reasons_keys = <?php echo json_encode(array_keys($reasons)); ?>;
    $(function () {

        $('#EmployeeDate').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");
//            build_table()
        })
//        build_table()
        $("#search_filter").on("click", function () {
            build_table();
        });
    })
    function build_table() {
        var data = {
            reason_ids: $("#reason_filter").val() == null ? reasons_keys : $("#reason_filter").val(),
            start_date: window.startDate ? window.startDate : startDate,
            end_date: window.endDate ? window.endDate : endDate};
        $.ajax({
            data: data,
            url: "HRMAjax/employee_leave_absence_report",
            complete: function (v1, v2) {
                if (v2 == "success") {
                     $("#tableWithSearch").DataTable().destroy();
                    $("#tableWithSearch tbody").empty();
                    var table_absence_cols = $('#tableWithSearch thead th.table_absence_setting_col');
                    var frst_table_absence_col = table_absence_cols.first();
                    table_absence_cols.not(frst_table_absence_col).remove();
                    var last_absence_col;
                    for (var i = 0; i < data.reason_ids.length; i++) {
                        if (i == 0)    //first one already exist so don't clone
                            last_absence_col = frst_table_absence_col;
                        else
                            last_absence_col = frst_table_absence_col.clone().insertAfter(last_absence_col);
                        last_absence_col.html(reasons[data.reason_ids[i]].Absence_Reason_Name);
                    }
                    $("#tableWithSearch tbody").html(v1.responseText);
                    //
                    var absence_list_dt = RebuildDataTable($('.panel-heading .panel-title').html(), [], "", {}, "#tableWithSearch",'',{hide_search_row:true});
                    //for all columns make them visible, needed for the new created columns related to selected absence reasons
                    absence_list_dt.columns().visible(true);

//                    RebuildDataTable($('.panel-heading .panel-title').html(), [], "", {}, "#tableWithSearch");
                }
            }
        });
//        RebuildDataTable(title, [0, 1, 2, 3], 'HRMAjax/employee_leave_absence_report', data);
    }
</script>