<style>
    .actionButton {
        background-color: #4c0870!important;
    }
</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('view_advance_payment') ?></div>
            <div id="DeductionValidationAlert"> </div>
            <div class="clearfix"></div>
        </div>
        <div class="panel-body">
            <div class="row 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">
                    <label><?php echo CommonLanguage::getMessage('status') ?></label>
                    <select class="full-width pend-status" id="pend-status" data-init-plugin="select2">
                        <option value="" ><?php echo CommonLanguage::getMessage('All') ?></option>
                        <option value="0"><?php echo CommonLanguage::getMessage('awaiting_review') ?></option>
                        <option value="1"><?php echo CommonLanguage::getMessage('approved') ?></option>
                    </select>
                </div>
                <?php if ($permissions->hasPermission('addAdvancePayment')) { ?>
                <div class="col-md-3 pull-right">    
                    <div class="floatingContainer ">
                        <div class="actionButton openFrame" data-src="HRM/addAdvancePayment<?php echo ($is_actual ? '/act' : '') . '?is_pop=1' ?>">
                            <p class="floatingText"><span class="floatingTextBG"><?php echo CommonLanguage::getMessage('add') ?></span></p>
                        </div>
                    </div>
                </div>
                <?php } ?>
            </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('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('status') ?></th>
                                <th class="text-center" ><?php print CommonLanguage::getMessage('Action') ?></th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="DeleteDeduction" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm" >
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="pg-close fs-20"></i>
                </button>
                <h5 class="text-left bold"><?php echo CommonLanguage::getMessage('Confirm_Delete'); ?></h5>
                <div id="Delete_modalAlert"></div>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12 ">
                        <p><?php print CommonLanguage::getMessage('delete') ?> <strong class="NameAdvance"></strong><?php print CommonLanguage::getMessage('irreversible_proc') ?></p>
                        <p><?php print CommonLanguage::getMessage('Proceed_Delete') ?></p>
                    </div>
                </div>
            </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_Advance" 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')); ?>,
                CurrentID_ToDelete, is_actual = <?php echo json_encode($is_actual); ?>,
                    startDate ='', endDate ='',
                        advance_id_filter = <?php echo json_encode($advance_id_filter); ?>;
                    //            is_approved = <?php // echo json_encode($is_approved); ?>;
                    $(function () {
                        //        $("#pend-status").val(is_approved).select2()
                        build_select2($('input.employee_select_id'), 'xhr/employeeSearch');
                        $('#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) {
                            window.startDate = picker.startDate.format('YYYY-MM-DD'),
                                window.endDate = picker.endDate.format('YYYY-MM-DD');
                            $(this).val(picker.startDate.format('YYYY-MM-DD') + ' - ' + picker.endDate.format('YYYY-MM-DD'));
                            rebuild_table()
                        });
                        $("#EmployeeDate").on('cancel.daterangepicker', function (ev, picker) {
                            window.startDate = ''
                            window.endDate = ''
                            $(this).val('');
                            rebuild_table()
                        });
                        rebuild_table()
                        $("#tableWithSearch").on("click", ".Action .Delete", function () {
                            var NameAdvance = $(this).parents("tr").find("td:eq(0)").text()//parent tr keep searching till it reach tr 
                            $("#Delete_modalAlert").attr('class', 'hidden');
                            $("#DeleteDeduction").find(".NameAdvance").text(NameAdvance).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
                        })
                        $("#EmployeeDate,input.employee_select_id,#pend-status").on("change", function () {
                            rebuild_table()
                            //            RebuildDataTable(title, [0], 'HRMAjax/dailyOvertimeRequest', {OverTimeDate: $("#OverTime_Date").val(), is_actual: is_actual, is_deduction: is_deduction})
                        });
                        // 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_Advance").on("click", function () {
                            var Data = {
                                GetID: CurrentID_ToDelete
                            }
                            $.ajax({
                                type: 'POST',
                                url: 'HRMAjax/viewAdvancePaymentRequest',
                                data: Data,
                                complete: function (data, vv) {
                                    if (vv == "success" && data.responseText == "OK") {
                                        $("#Delete_modalAlert").attr("class", "alert alert-success").html(Submitted_Successfully).show()
                                        rebuild_table()
                                        setTimeout(function () {
                                            $("#DeleteDeduction").modal("hide")
                                        }, 1000)
                                    } else {
                                        $("#Delete_modalAlert").attr("class", "alert alert-danger").html(data.responseText).show()
                                    }
                                }
                            });
                        })
                        $("#tableWithSearch").on("click", ".Approve,.Reject", function () {
                            //            alert($(this).attr('data-id'))
                            //            alert($(this).attr('data-status'))
                            $.ajax({
                                url: "HRMAjax/approve_advance_payment",
                                method: "POST",
                                data: {id: $(this).attr('data-id'), status: $(this).attr('data-status')},
                                complete: function (v1, v2) {
                                    if (v2 == 'success' && v1.responseText == 'OK') {
                                        rebuild_table()
                                    }
                                }
                            })
                        })

                    })
    function rebuild_table() {
        var data = {
            from_date: window.startDate,
            to_date: window.endDate,
            is_actual: is_actual,
            status: $("#pend-status").val(),
            emp_id: $('input.employee_select_id').val()}
        if (advance_id_filter != '')
            data.advance_id_filter = advance_id_filter;
        RebuildDataTable(title, [0, 1, 2, 3], 'HRMAjax/viewAdvancePaymentRequest', data);
        advance_id_filter = '';


    }
</script>
