<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('daily_overtime'); ?></div>
            <div id="OverTimeSuccess" class="hidden"></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 (($is_deduction && $permissions->hasPermission('addDeduction')) || (!$is_deduction && $permissions->hasPermission('addOvertime'))) { ?>
                    <div class="col-md-3 pull-right">    
                        <div class="floatingContainer ">
                            <div class="actionButton openFrame" data-src="HRM/addOvertime<?php echo ($is_deduction ? '/ded/' : '/') . ($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-hover hrm" id="tableWithSearch" >
                        <thead>
                            <tr>
                                <th ><?php print CommonLanguage::getMessage('Date'); ?> </th>
                                <th ><?php print CommonLanguage::getMessage('employee_name'); ?> </th>
                                <th ><?php print CommonLanguage::getMessage('note'); ?> </th>
                                <th ><?php print CommonLanguage::getMessage('amount'); ?></th>
                                <th ><?php print CommonLanguage::getMessage('duration'); ?></th>
                                <th ><?php print CommonLanguage::getMessage('status'); ?></th>
                                <th class="no-print"><?php print CommonLanguage::getMessage('Action'); ?></th>
                                <!--<th ><?php print CommonLanguage::getMessage('is_paid'); ?></th>-->
                            </tr>
                        </thead>
                        <tbody>


                        </tbody>
                    </table>
<!--                    <button id="SubmitOverTime" class="btn btn-success" style="float:right"> <i class="fa fa-file"></i> < ?php print CommonLanguage::getMessage('Save'); ?></button>-->
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="delete_overtime" 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') ?> <?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_overtime_btn" 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')); ?>,
            Deleted_Successfully = <?php echo json_encode(CommonLanguage::getMessage('Deleted_Successfully')); ?>,
            title = <?php echo json_encode(CommonLanguage::getMessage('daily_overtime')); ?>,
            is_actual = <?php echo json_encode($is_actual); ?>,
            overTimeStartDate = '', overTimeEndTime = '',
            //            is_approved = <?php // echo json_encode($is_approved);     ?>,
            overtime_id_filter = <?php echo json_encode($overtime_id_filter); ?>,
            id_to_delete = 0,
            is_deduction = <?php echo json_encode($is_deduction); ?>;
    $(function () {
        //        $("#pend-status").val(is_approved).select2()
        $('#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) {
            overTimeStartDate = picker.startDate.format('YYYY-MM-DD'),
                    overTimeEndTime = 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) {
            overTimeStartDate = ''
            overTimeEndTime = ''
            $(this).val('');
            rebuild_table()
        });
        build_select2($('input.employee_select_id'), 'xhr/employeeSearch');
        rebuild_table()
        //        RebuildDataTable(title, [0], 'HRMAjax/dailyOvertimeRequest', {OverTimeDate: $("#OverTime_Date").val(), is_actual: is_actual, is_deduction: is_deduction})

        //        $("body").addClass("NoSearch")
        //        $("body .search-link[data-toggle='search']").html("<i class='pg-search'></i>Click here to <span class='bold'>search</span>")
        $("#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})
        });
        $("#tableWithSearch").on("click", ".delete_entry", function () {
            id_to_delete = $(this).parents(".Action").attr("data-id");
            $("#delete_overtime").modal("show")
        })

        $("#delete_overtime_btn").on("click", function () {
            $.ajax({
                url: "HRMAjax/delete_overtime",
                method: "POST",
                data: {id: id_to_delete},
                complete: function (v1, v2) {
                    if (v2 == 'success' && v1.responseText == 'OK') {
                        $("#Delete_modalAlert").attr("class", "alert alert-success").html(Deleted_Successfully)
                        rebuild_table()
                        id_to_delete = 0;
                        setTimeout(function () {
                            $("#delete_overtime").modal("hide")
                            $("#Delete_modalAlert").addClass("hidden")
                        }, 1000)

                    } else {
                        $("#Delete_modalAlert").attr("class", "alert alert-danger").html(v1.responseText)

                    }
                }
            })
        })
        $("#tableWithSearch").on("click", ".Approve,.Reject", function () {
            //            alert($(this).attr('data-id'))
            //            alert($(this).attr('data-status'))
            $.ajax({
                url: "HRMAjax/approveRejectOvertime",
                method: "POST",
                data: {id: $(this).attr('data-id'), status: $(this).attr('data-status'), type: (is_deduction ? 'deduction' : 'overtime')},
                complete: function (v1, v2) {
                    if (v2 == 'success' && v1.responseText == 'OK') {
                        rebuild_table()
                    }
                }
            })
        })
        $("#SubmitOverTime").on("click", function () {
            $("#OverTimeSuccess").attr("class", "hidden");
            var Data = {
                OverTime: [],
                //                    is_actual:is_actual
            }

            $("#tableWithSearch  input.check:checked").each(function () {
                Data.OverTime.push({
                    Employee_ID: $('.overData').attr("data-id"),
                    Overtime_ID: $('.overData').attr("data-overtime"),
                    OverTime_Date: $("#OverTime_Date").val(),
                    Overtime_Amount: $('.overData').attr("data-amount"),
                    Currency_ID: $('.overData').attr("data-currency"),
                    is_actual: $('.overData').attr("data-actual"),
                    Is_Paid: 1

                });
            });
            $.ajax({
                url: "HRMAjax/dailyOvertimeRequest",
                method: "POST",
                data: Data,
                complete: function (v1, v2) {
                    if (v2 == 'success') {
                        $("#OverTimeSuccess").attr("class", "alert alert-success").html(Submitted_Successfully)
                        rebuild_table()
                    } else {
                        $("#OverTimeSuccess").attr("class", "alert alert-danger").html(Failed_Submit)
                    }
                    $(document.body).animate({scrollTop: 0}, 800)
                }
            })
        })

        $("#frameModal button").on("click", function () {
            rebuild_table()
        })
    })
    function rebuild_table() {
        var data = {
            from_date: overTimeStartDate,
            to_date: overTimeEndTime,
            is_actual: is_actual,
            is_deduction: is_deduction,
            status: $("#pend-status").val(),
            emp_id: $('input.employee_select_id').val()}

        if (overtime_id_filter != '')
            data.overtime_id_filter = overtime_id_filter;
        RebuildDataTable(title, [0], 'HRMAjax/dailyOvertimeRequest', data)
        overtime_id_filter = ''
    }

</script>