<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('manage_emp_leaves'); ?></div>
            <div id="absence_alert"></div>
        </div>
        <div class="panel-body">

            <div class="row m-b-10 form-group">
                <div class="col-md-2">
                    <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">
                    <label><?php echo CommonLanguage::getMessage('job') ?></label>
                    <input type="hidden" id="job_filter" class="full-width"/>
                </div>
                <div class="col-md-2">
                    <label><?php echo CommonLanguage::getMessage('department') ?></label>
                    <input type="hidden" id="dep_filter" class="full-width"/>
                </div>
                <div class="col-md-2">
                    <label><?php echo CommonLanguage::getMessage('shift') ?></label>
                    <input type="hidden" id="shift_filter" class="full-width"/>
                </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 class="row">
                <div class="col-md-12 table-responsive">
                    <table class="table table-bordered hrm" id="tableWithSearch" >
                        <thead>
                            <tr>
                                <th class="text-center"  ><?php print CommonLanguage::getMessage('Name'); ?></th>
                                <?php
                                if (!empty($reasons)) {
                                    foreach ($reasons as $type) {
                                        ?><th class="text-center table_absence_setting_col"><?php print $type['Absence_Reason_Name']; ?></th><?php
                                        }
                                    }
                                    ?>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>

                    </table>
                </div>
            </div>
            <div class="row">
                <div class="col-md-3 pull-right">
                    <button class="btn btn-success full-width" id="submit_emp"><?php echo CommonLanguage::getMessage('Save') ?></button>
                </div>
            </div>
            <?php echo Forms::ModalLoader('leave_loader'); ?>
        </div>
    </div>
</div>
<script>
    var reasons = <?php echo json_encode($reasons); ?>,
            reasons_keys = <?php echo json_encode(array_keys($reasons)); ?>;
    $(function () {
//        var data_session = get_storage_element(page_link);
//        console.log(page_link)
//        if (data_session.job_id != '') {
//            $("#job_filter").val(data_session.job_id).attr("data-select-name", data_session.job_name)
//        }
//        if (data_session.dep_id != '') {
//            $("#dep_filter").val(data_session.dep_id).attr("data-select-name", data_session.dep_name)
//        }
//        if (data_session.shift_id != '') {
//            $("#shift_filter").val(data_session.shift_id).attr("data-select-name", data_session.shift_name)
//        }
//        if (data_session.reason_arr != null) {
//            $("#reason_filter").val(data_session.reason_arr).select2()
//        }
//        build_table()
        build_select2($("#job_filter"), 'xhr/jobSearch');
        build_select2($("#dep_filter"), 'HRMAjax/searchDepartment');
        build_select2($("#shift_filter"), 'xhr/searchshift');

        $("#submit_emp").on("click", function () {
            var data = {emp_arr: []};
            $("input.nb_days").each(function () {
                data.emp_arr.push({
                    employee_id: $(this).attr("data-emp"),
                    reason_id: $(this).attr("data-type"),
                    nb_days: $(this).val()
                });
            });
            $.ajax({
                url: "HRMAjax/update_emp_absence",
                data: data,
                method: "POST",
                complete: function (jqXHR, textStatus) {
                    if (textStatus == "success" && jqXHR.responseText == 'OK') {
                        build_table()
                        $("#absence_alert").attr("class", "alert alert-success").html('<?php echo CommonLanguage::getMessage('Submitted_Successfully') ?>');
                        setTimeout(function () {
                            $("#absence_alert").addClass("hidden");
                        }, 5000)
                    } else {
                        $("#absence_alert").attr("class", "alert alert-danger").html('<?php echo CommonLanguage::getMessage('Failed_Submit') ?>');

                    }
                }
            });
        });
        $("#search_filter").on("click", function () {
            build_table();
        });
    });
    function build_table() {
        var reason_arr = $("#reason_filter").val() == null ? reasons : $("#reason_filter").val();
        var data = {
            job_id: $("#job_filter").val(),
            job_name: $("#job_filter").val() != '' ? $("#job_filter").select2('data').text : '',
            dep_id: $("#dep_filter").val(),
            dep_name: $("#dep_filter").val() != '' ? $("#dep_filter").select2('data').text : '',
            shift_id: $("#shift_filter").val(),
            shift_name: $("#shift_filter").val() != '' ? $("#shift_filter").select2('data').text : '',
            reason_ids: $("#reason_filter").val() == null ? reasons_keys : $("#reason_filter").val()
        };
//        $("#tableWithSearch thead").empty();
//        var thead = '<tr><th class="text-center"  ><?php print CommonLanguage::getMessage('Name'); ?></th>';
//        $.each(reason_arr, function (indx, id) {
//            var myindx = $("#reason_filter").val() == null ? indx : id;
//            thead += '<th class="text-center"  >' + reasons[myindx]['Absence_Reason_Name'] + '</th>';
//        });
//        thead + '</tr>';
//        $("#tableWithSearch thead").html($(thead));
        //we stop above and use below as above if we have select 2 options then remove 1 option it corrupt data table and give error
        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);
        }
        //
        var absence_list_dt = RebuildDataTable('<?php echo CommonLanguage::getMessage('emp_absence_setting') ?>', [], 'HRMAjax/emp_absence_setting_ajax', data);
        //for all columns make them visible, needed for the new created columns related to selected class price
        absence_list_dt.columns().visible(true);
    }
</script>
