
<style>
    .input-group-addon.complete {
        background-color:#4c0870;
        color: #ffffff;
    }
    #InputFile{
        /*        margin-left:128px;
        margin-top:10px;*/
        background-color:#4c0870 !important;
        color:#fff;
    }
    #InputFile > input{
        position:absolute;
        left:0px;
        top:0px;
        width:100%;
        height:100%;
        opacity:0.01;
        cursor:pointer;
    }
</style>

<div class="modal fade stick-up DontReset" id="add_absence" tabindex="-1" role="dialog" aria-hidden="true" >
    <div class="modal-dialog modal-md">
        <?php echo Forms::ModalLoader('EmpployeeIsBusy'); ?>
        <div class="modal-content">
            <div class="modal-header clearfix text-left">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="pg-close fs-20"></i></button>
                <h5 class="bold"><?php print CommonLanguage::getMessage('add_emp_absence'); ?></h5>
            </div>
            <div class="modal-body">
                <div id="EmployeeValidationAlert"></div>
                <form id="AddAbsencePostForm" method="POST" onsubmit="return false">
                    <div class="row form-group">
                        <div class="col-md-12  <?php echo $permissions->hasPermission('ApproveLeave') ? '' : 'hidden' ?>">
                            <label><?php echo CommonLanguage::getMessage('employee') ?></label><span class="red-star">*</span>
                            <input type="hidden" class="full-width Employee_ID" name="Employee_ID" id="Employee_ID" value="<?php echo ($permissions->hasPermission('ApproveLeave') ? '' : smc_session()['user_details']['Employee_ID']) ?>" data-select-name="<?php echo json_encode(($permissions->hasPermission('ApproveLeave') ? '' : smc_session()['user_details']['Employee_Name'])) ?>" />
                        </div>
                    </div>
                    <div class="row form-group">
                        <div class="col-md-6">
                            <label><?php echo CommonLanguage::getMessage('reason') ?></label>
                            <select name="Absence_Reason_ID" id="Absence_Reason_ID" class="full-width" data-init-plugin="select2">
                                <?php foreach ($reasons_Types as $type): ?>
                                    <option value="<?php echo $type['Absence_Reason_ID']; ?>"><?php echo $type['Absence_Reason_Name']; ?></option>
                                <?php endforeach; ?>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label><?php echo CommonLanguage::getMessage('Date') ?></label><span class="red-star">*</span>
                            <div class="input-group  col-md-12 " >
                                <input id="From_To_Date" type="text" autocomplete="off" class="form-control" name="From_To_Date" >
                            </div> 
                        </div>

                    </div>
                    <br>
                    <div class="row">
                        <div class='col-md-4 pull-left'>
                            <button class="btn btn-default" id="InputFile"><i class="fa fa-upload"></i> <?php print CommonLanguage::getMessage('Upload'); ?> <span class='inputcheck fa fa-check hidden'></span> <input type="file" data-target="#CurDocument" onchange="window.NewCurrentFileUploadadd = event.target.files;ValidateForNewFile(this, 'Picture')" name="Document_File_Name" value="Upload"></button>
                        </div>
                        <div class="col-md-4 pull-right">                            
                            <button class="btn btn-success pull-right " id="SubmitEmployeeAbsence"  > <?php print CommonLanguage::getMessage('Save'); ?>   </button>
                            <button class="btn btn-default pull-right" id="CloseEmployeeAbsence"   > <?php print CommonLanguage::getMessage('Close'); ?> </button>
                        </div>
                    </div>
                </form>
            </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')); ?>,
            emp_name = <?php echo json_encode($emp_name); ?>,
            emp_id = <?php echo json_encode($emp_id); ?>,
            Required_Fields = <?php echo json_encode(CommonLanguage::getMessage('Required_Fields')); ?>;
    var today = <?php echo json_encode($today) ?>;
    $(function () {
        if (emp_name != 0)
            $('input.Employee_ID').val(emp_id).attr("data-select-name", emp_name)
        build_select2($('.Employee_ID'), 'xhr/employeeSearch?is_actual=' + is_actual);
        $("input[name=From_To_Date]").daterangepicker({
        }, function (start, end, label) {
            window.startDate = start.format("YYYY-MM-DD"),
                    window.endDate = end.format("YYYY-MM-DD")
        });
        $("#SubmitEmployeeAbsence").on("click", function () {
            if ($("input[name=From_To_Date]").val() == '' || $("#Employee_ID").val() == '') {
                $("#EmployeeValidationAlert").attr("class", "alert alert-danger").empty().html(Required_Fields);
                return;
            }
            $("#EmpployeeIsBusy").removeClass("hidden");
            var Data = new FormData(document.getElementById("AddAbsencePostForm"));
            Data.append("Employee_ID", $("#Employee_ID").val())
            Data.append("Absence_Reason", $("#Absence_Reason_ID").val())
            Data.append("Absence_From_Date", (window.startDate ? window.startDate : today))
            Data.append("Absence_To_Date", (window.endDate ? window.endDate : today))
            Data.append("id", id_to_edit)
            Data.append("is_actual", is_actual)

            $.ajax({
                url: is_edit ? "HRMAjax/edit_absence" : "HRMAjax/addAbsenceRequest",
                processData: false,
                contentType: false,
                method: "POST",
                dataType: "json",
                data: Data,
                complete: function (v1, v2) {
                    if (v2 == 'success' && v1.responseJSON[0] == 'success') {
                        RebuildDataTable(title, [0, 1, 2, 3, 4], 'HRMAjax/EmployeeAbsenceList', {is_actual: is_actual});
                        $("#EmployeeValidationAlert").attr("class", "alert alert-success").empty().html(Submitted_Successfully);
                        setTimeout(function () {
                            $("#add_absence").modal('hide')
                            $("#EmployeeValidationAlert").addClass("hidden")
                        }, 1000)
                    } else {
                        $("#EmployeeValidationAlert").attr("class", "alert alert-danger").empty().html(v1.responseJSON[1]);
                    }
                    $("#EmpployeeIsBusy").addClass('hidden');
                    $("#add_absence input").not('.Employee_ID').val("");
                }
            });
        });
        $("#add_absence input").not('.Employee_ID').val("");
    })
    $("#CloseEmployeeAbsence").on("click", function () {
        $("#add_absence input").not('.Employee_ID').val("");
        $("#add_absence ").modal("hide");
    });


//    $('#Employee_ID,#Absence_Reason_ID').on('change', function () {
//        var Data = {
//            Employee_ID: $("#Employee_ID").val(),
//            Absence_Reason: $("#Absence_Reason_ID").val()
//        };
//        $.ajax({
//            url: 'HRMAjax/checkAbsenceRequest',
//            data: Data,
//            dataType: "json",
//            complete: function (v, v1) {
//                if (v1 == 'success' && v.responseJSON[0] == 'error') {
//                    $("#EmployeeValidationAlert").attr("class", "alert alert-warning").empty().html(v.responseJSON[1]);
//
//                } else {
//                    $("#EmployeeValidationAlert").addClass("hidden");
//                }
//            }
//        });
//
//
//
//
//
//
//
//
//    })
    function ValidateForNewFile(input) {
        var IsFileOK = false;
        if (input.files && input.files[0]) {
            var FileName = $.trim(input.files[0].name)
            var FileType = FileName.substring(FileName.lastIndexOf("."));
            if (FileType) {
                FileType = FileType.toLowerCase();
                if (FileType == ".txt" || FileType == ".pptx" || FileType == ".png" || FileType == ".jpg" || FileType == ".jpeg" || FileType == ".gif" || FileType == ".docx" || FileType == ".pdf" || FileType == ".xlsx") {
                    IsFileOK = true;
                }
            }
            $("#CurDocument").hide()
            $("#NewFilewarning2").remove()
            if (IsFileOK == false) {
                $("<span id='NewFilewarning2' style='color:#f00;display: block;text-align: center;'> [File not Supported]</span>").insertAfter($(input))
                $("#InputFile").css("margin-left", "85px")
                $("#CurDocument").css('display', '');
                $("#InputFile").append(" <span class='fa fa-times'></span>")
                $("#InputFile > .fa-check").hide()

                $("#document-modal").append('<div id="ModalIsBusy" style="position:absolute;left:0;right:0;top:0px;height:100%;background:rgba(255,255,255,0.9);z-index:9999;opacity:0"><img class="image-responsive-height demo-mw-50" src="img/demo/progress.svg" alt="Progress" style="position: absolute;left: 50%;top: 50%;margin: -25px 0 0 -25px;" /></div>');
                $("#ModalIsBusy").animate({opacity: 1});
                setTimeout(function () {
                    $("#ModalIsBusy").remove()
                }, 800)

                return false;
            } else {
                var reader = new FileReader();
                reader.onload = function () {
                    $("#CurDocument").css('display', '');
                    $("#InputFile").css("margin-left", "")
                    $("#InputFile > .fa-times").hide()
                    $(".inputcheck").removeClass("hidden")
                    //                    $("#CurDocument").attr('src', e.target.result).show();

                    $("#document-modal").append('<div id="ModalIsBusy" style="position:absolute;left:0;right:0;top:0px;height:100%;background:rgba(255,255,255,0.9);z-index:9999;opacity:0"><img class="image-responsive-height demo-mw-50" src="img/demo/progress.svg" alt="Progress" style="position: absolute;left: 50%;top: 50%;margin: -25px 0 0 -25px;" /></div>');
                    $("#ModalIsBusy").animate({opacity: 1});
                    setTimeout(function () {
                        $("#ModalIsBusy").remove()
                    }, 800)
                }
                reader.readAsDataURL(input.files[0]);
                return true;



            }
        }
        return false;
    }
</script>