
<style>
    .input-group-addon.complete {
        background-color:#4c0870;
        color: #ffffff;
    }
    .hidden{
        display: none;
    }
    #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" tabindex="-1" role="dialog" aria-labelledby="role-mode" id="CreateEmpAlert" aria-hidden="true" >
    <div class="modal-dialog modal-md">
        <div class="modal-content">
            <?php echo Forms::ModalLoader('addIsBusy') ?>
            <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" id="myModalLabel"> <?php print CommonLanguage::getMessage('add_emp_alert'); ?></h4>
                <br>
                <div id="EmployeeValidationAlert"></div>
                <input type='hidden' id="IsEdit" class="hidden" data-value='0' value="0" />


            </div>
            <div class="modal-body">
                <form id="AssignEmpAlertForm" method="POST" onsubmit="return false">
                    <div class="col-md-12 form-group">
                        <div class="col-md-6">
                            <label><?php echo CommonLanguage::getMessage('employee') ?></label><span class="red-star">*</span>
                            <input type="hidden" required  class="full-width Employee_ID" name="Employee_ID" id="Employee_ID" required/>
                        </div>
                        <div class="col-md-6">
                            <label><?php echo CommonLanguage::getMessage('Date') ?></label><span class="red-star">*</span>
                            <input type="text" class="form-control employee_alert_date" value="<?php echo $today ?>"name="employee_alert_date" id="employee_alert_date" required/>
                        </div>


                    </div>

                    <div class="col-md-12 form-group">
                        <div class="col-md-6">

                            <div class="radio radio-success " id="alert_type">
                                <input type="radio" value="1" name="employee_alert_type"  id="Success">
                                <label for="Success"> <?php print CommonLanguage::getMessage('emp_allusion'); ?></label><br/>
                                <input type="radio" checked="checked" value="0" name="employee_alert_type"  id="Failed">
                                <label for="Failed"><?php print CommonLanguage::getMessage('emp_warning'); ?></label>
                            </div>
                        </div>

                    </div>
                    <div class="col-md-12 form-group">
                        <div class="col-md-12 ">
                            <label><?php echo CommonLanguage::getMessage('note') ?></label><span class="red-star">*</span>
                            <textarea class="form-control employee_alert_note" Placeholder="<?php echo CommonLanguage::getMessage('note') ?>" id="employee_alert_note" required style="resize: vertical;"></textarea>
                        </div>
                    </div>
                    <div class='col-md-2 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>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" id="CloseAdd" data-dismiss="modal"><?php print CommonLanguage::getMessage('Close'); ?></button>
                <button type="submit" class="btn btn-success " id="SubmitAdd"><?php print CommonLanguage::getMessage('Save'); ?></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')); ?>,
            add = <?php echo json_encode(CommonLanguage::getMessage('add_emp_alert')); ?>,
            edit = <?php echo json_encode(CommonLanguage::getMessage('edit_emp_alert')); ?>,
            Required_Fields = <?php echo json_encode(CommonLanguage::getMessage('Required_Fields')); ?>;
    var entry_id, doc_id;
    $(function () {
        build_select2($('#Employee_ID'), 'xhr/employeesearch?is_actual=' + is_actual);
        $('#employee_alert_date').datepicker({autoclose: true});

        $("#tableWithSearch").on("click", ".Edit", function () {
            entry_id = $(this).attr('data-id');
            doc_id = $(this).attr('doc_id');

            $('#myModalLabel').empty().html(edit);
            $('#CreateEmpAlert').modal('show');
            $("#IsEdit").attr('data-value', 1);
            $.ajax({
                url: 'HRMAjax/getEmpAlert?id=' + entry_id,
                dataType: 'JSON',
                complete: function (v1, v2) {
                    var Data = v1.responseJSON;
                    if (v2 == 'success') {
                        $('#employee_alert_date').val(Data['employee_alert_date']);
                        $('#employee_alert_note').val(Data['employee_alert_note']);
                        $('#Employee_ID').val(Data['employee_id']);
                        $('#Employee_ID').attr('data-select-name', Data['employee_name']);
                        $('#InputFile').val(Data['employee_alert_document']);
                        build_select2($('#Employee_ID'), 'xhr/employeesearch');
                        $("#alert_type > [name='employee_alert_type'][value='" + (Data.employee_alert_type) + "']").prop("checked", true)
                    }
                }
            });
        });
        $('#SubmitAdd').on('click', function () {
            if ($("#employee_alert_note").val() == '' || $('#Employee_ID').val() == '') {
                $("#EmployeeValidationAlert").attr("class", "alert alert-danger").empty().html(Required_Fields);
                return;
            }
            $("#addIsBusy").removeClass('hidden');
            var Data = new FormData(document.getElementById("AssignEmpAlertForm"));
            Data.append("Employee_ID", $("#Employee_ID").val());
            Data.append("is_actual", is_actual);
            Data.append("Employee_Name", $.trim($('.Employee_ID').text()));
            Data.append("employee_alert_date", $('#employee_alert_date').val());
            Data.append("employee_alert_type", $('input[name=employee_alert_type]:checked', '#alert_type').val());
            Data.append("employee_alert_note", ($('#employee_alert_note').val()));
            if (($("#IsEdit").attr('data-value') == 1)) {
                Data.append("entry_id", entry_id);
                Data.append("doc_id", doc_id);
                Data.append("doc_name", $('#InputFile').val());
            }
            $.ajax({
                url: "HRMAjax/add_employee_alert",
                processData: false,
                contentType: false,
                method: "POST",
                dataType: "json",
                data: Data,
                complete: function (v, vv) {
                    if (vv == 'success') {
                        if (v.responseJSON[0] == 'success') {
                            RebuildDataTable(title, [0, 1, 2, 3], 'HRMAjax/viewEmployeeAlert');
                            $("#EmployeeValidationAlert").attr("class", "alert alert-success").empty().html(Submitted_Successfully);
                            setTimeout(function () {
                                $("#CreateEmpAlert").modal('hide')
                            }, 1500)
                            setTimeout(function () {
                                $("#EmployeeValidationAlert").addClass('hidden')
                            }, 1500)
                        } else {
                            $("#EmployeeValidationAlert").attr("class", "alert alert-danger").empty().html(v.responseJSON[1]);
                        }
                        $("#addIsBusy").addClass('hidden');
                    } else {
                        $("#EmployeeValidationAlert").attr("class", "alert alert-danger").empty().html(Failed_Submit);
                    }

                    $("#IsEdit").attr('data-value', 0);
                    $('#myModalLabel').empty().html(add);
                }
            })
        })
    })
    $('#CloseAdd').on('click', function () {
        $("#IsEdit").attr('data-value', 0);
        $('#myModalLabel').empty().html(add);
    });

    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>