<style>
    .table thead tr >th{
        background-color:#4c0870;
        color:#fff;
        width: 17% !important;
    }
    .table thead tr th[class*='sorting_'] {
        color: #fff;
    }
    .bg-master-lighter {
        border:none;
        background-color:#fff;
        border-top:1px solid #ddd;  
    }
    .btn-default{
        border: none;
        background-color: #eee;
    }
    .btn-default:hover{
        background-color:#4c0870!important;
        color:#fff;
        border: none;
    }
    .actionButton{
        background-color: #4c0870;
    }
</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($IsBonus ? 'bonus' : 'deduction') ?></div>
            <div id="DeductionValidationAlert"> </div>
            <div class="clearfix"></div>
        </div>
        <div class="panel-body">
            <div class="col-md-12 form-group">
                <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-3">
                    <label><?php echo CommonLanguage::getMessage('employee_name') ?></label><span class="red-star">*</span>
                    <input type="hidden" id="employee_select_id" name="employee_select_id" class='full-width employee_select_id'/>
                </div>
                <div class="col-md-3 pull-right">    
                    <div class="floatingContainer ">
                        <div class="actionButton openFrame" data-src="HRM/addDeduction<?php echo ($IsBonus ? '/bonus/' : '/') . ($is_actual ? 'act' : '') . '?is_pop=1' ?>">
                            <p class="floatingText"><span class="floatingTextBG"><?php echo CommonLanguage::getMessage('add') ?></span></p>
                        </div>
                    </div>
                </div>
            </div>
            <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('description') ?></th>
                        <th class="text-center" ><?php print CommonLanguage::getMessage('amount') ?></th>
                        <th class="text-center" ><?php print CommonLanguage::getMessage('Date') ?></th>
                        <th class="text-center" ><?php print CommonLanguage::getMessage('Action') ?></th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
</div>

<div class="modal fade bs-example-modal-md" id="DeleteDeduction" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="width:50%">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                <h4 class="modal-title"><?php print CommonLanguage::getMessage('Confirm_Delete') ?></h4>
                <div id="Delete_modalAlert"></div>
            </div>
            <div class="modal-body">
                <form>
                    <div class="row">
                        <div class="col-md-12 ">
                            <div class="col-md-12" style="margin-top: 20px;">
                                <p><?php print CommonLanguage::getMessage('delete') ?> <strong class="NameDeduction"></strong><?php print CommonLanguage::getMessage('irreversible_proc') ?></p>
                                <p><?php print CommonLanguage::getMessage('Proceed_Delete') ?></p>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal"><?php print CommonLanguage::getMessage('Close') ?></button>
                <button type="button" class="btn btn-danger" id="Delete_Deduction" style="width:auto"><?php print CommonLanguage::getMessage('delete') ?></button>
            </div>
        </div>
    </div>
</div>


<script>
    var Submitted_Successfully = <?php echo json_encode(CommonLanguage::getMessage('Submitted_Successfully')); ?>,
            Failed_Submit = <?php echo json_encode(CommonLanguage::getMessage('Failed_Submit')); ?>,
            title = <?php echo json_encode(CommonLanguage::getMessage('dedcution')); ?>,
            IsBonus = <?php echo json_encode($IsBonus); ?>,
            StartDate = '', EndDate = '',
            is_actual = <?php echo json_encode($is_actual); ?>;
    $(function () {
        build_select2($('input.employee_select_id'), 'xhr/employeeSearch?is_actual=' + is_actual + '&with_id=1');
        $('input.employee_select_id').on("change", function () {
            build_table()
        })
        build_table()
//        RebuildDataTable(title, [0, 1, 2, 3], 'HRMAjax/viewEmployeeDeductionRequest', {IsBonus: IsBonus, is_actual: is_actual})

        $('#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')]
            }, locale: {
                cancelLabel: 'Clear'
            }, allowEmpty: false,
            autoUpdateInput: false
        })
        $("#EmployeeDate").on('apply.daterangepicker', function (ev, picker) {
            StartDate = picker.startDate.format('YYYY-MM-DD'),
                    EndDate = picker.endDate.format('YYYY-MM-DD');
            $(this).val(picker.startDate.format('YYYY-MM-DD') + ' - ' + picker.endDate.format('YYYY-MM-DD'));
            build_table()
        });
        $("#EmployeeDate").on('cancel.daterangepicker', function (ev, picker) {
            StartDate = ''
            EndDate = ''
            $(this).val('');
            build_table()
        });


    })
    var CurrentID_ToDelete;
    $("#tableWithSearch").on("click", ".Action .Delete", function () {
        var NameDeduction = $(this).parents("tr").find("td:eq(0)").text()//parent tr keep searching till it reach tr 

        $("#Delete_modalAlert").attr('class', 'hidden');
        $("#DeleteDeduction").find(".NameDeduction").text(NameDeduction).end().modal("show") // to set the name of employee in modal to delete 


        CurrentID_ToDelete = $(this).parents('tr').find('.Action').attr('data-id') // current id to delete

    })
    // hide the alert when submit if true or false
    //on click the delete button in modal get the id of the selected employee to delete it 
    $("#Delete_Deduction").on("click", function () {
        var Data = {
            GetID: CurrentID_ToDelete,
            IsBonus: IsBonus ? 1 : 0

        }

        $.ajax({
            type: 'POST',
            url: 'HRMAjax/viewEmployeeDeductionRequest',
            data: Data,
            complete: function (data, vv) {
                if (vv == "success" && data.responseText == "OK") {

                    $("#Delete_modalAlert").attr("class", "alert alert-success").html(Submitted_Successfully).show()
//                    RebuildDataTable(title, [0, 1, 2, 3], 'HRMAjax/viewEmployeeDeductionRequest', {IsBonus: IsBonus, is_actual: is_actual})
                    build_table()
                    setTimeout(function () {
                        $("#DeleteDeduction").modal("hide")
                    }, 1000)
                } else {
                    $("#Delete_modalAlert").attr("class", "alert alert-danger").html(Failed_Submit).show()

                }
            }});
    })
    $("#frameModal button").on("click", function () {
        build_table()
//        RebuildDataTable(title, [0, 1, 2, 3], 'HRMAjax/viewEmployeeDeductionRequest', {IsBonus: IsBonus, is_actual: is_actual})

    })

    function build_table() {
        var data = {
            IsBonus: IsBonus,
            is_actual: is_actual,
            from_date: StartDate,
            to_date: EndDate,
            employee_id : $('input.employee_select_id').val()
        }
        RebuildDataTable(title, [0, 1, 2, 3], 'HRMAjax/viewEmployeeDeductionRequest', data)

    }
</script>

