
<style>
    .dropdown-menu>li>a {
        cursor:pointer;
    }
    .inputIcon{
        width:30px;}
</style>
<div class="modal fade stick-up " data-backdrop="static" id="addUOM" tabindex="-1" role="dialog" aria-hidden="true" style="width:30%;margin:0 auto">
    <div class="modal-dialog  width:5px;">
        <div class="modal-content width: 494px;">
            <div class="modal-header clearfix text-left">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="pg-close fs-14"></i></button>
                <h5><span class="semi-bold"><?php print CommonLanguage::getMessage('New_UOM'); ?></span></h5>
                <div id="addUOMAlert"></div>
            </div>
            <div class="modal-body">
                <form id="AddUOMPostForm" method="POST" onsubmit="return false">
                    <div class="row">
                        <div class="col-md-12" >
                            <div class="col-md-8">
                                <div><label><?php print CommonLanguage::getMessage('UOM'); ?></label></div>
                                <div class="input-group required">
                                    <span class="input-group-addon bg-complete-darker">
                                        <i class="fa fa-ship inputIcon" ></i>
                                    </span>
                                    <input type="text" placeholder="UOM" id="UOMID" name="UOM" class="form-control "  style="width: 252px; " required>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer ">
                <div class="pull-right">
                    <button class="btn btn-default" id="CloseUOM"   > <?php print CommonLanguage::getMessage('Close'); ?> </button>
                    <button class="btn btn-bg-complete-darker" id="SubmitUOM"  > <?php print CommonLanguage::getMessage('Save'); ?>   </button>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    var Required_Fields = <?php echo json_encode(CommonLanguage::getMessage('Required_Fields')); ?>,
        Failed_Submit = <?php echo json_encode(CommonLanguage::getMessage('Failed_Submit')); ?>,
            Submitted_Successfully = <?php echo json_encode(CommonLanguage::getMessage('Submitted_Successfully')); ?>;
            $(function () {
                // $("#AddProductPostForm").validate();
                $("#SubmitUOM").on("click", function () {
                    $("#addUOMAlert").attr("class", "").html("")

                    $("#MaterialIsBusy").remove();
                    if ($("#UOMID").val() != "") {
                        $("#addUOM").append('<div id="MaterialIsBusy" 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>');
                        $("#MaterialIsBusy").animate({opacity: 1});

                        var Data = {
                            UOM: $("#UOMID").val()
                        }

                        $.ajax({
                            url: "StockAjax/addUOMAjax",
                            method: "POST",
                            data: Data,
                            dataType: "JSON",
                            complete: function (v1, v2) {
                                if (v2 == 'success') {
                                    var response = v1.responseJSON, responseType = $.type(response);
                                    if (responseType == 'array') {
                                        var newUOM = "<option value='" + v1.responseJSON[0]['UOM_ID'] + "'>" + v1.responseJSON[0]['UOM_Name'] + "</option>";
                                        $("#Material_UOM").append($(newUOM))
                                        $("#Depot_UOM").append($(newUOM))
                                        $("#Material_UOM").val(v1.responseJSON[0]['UOM_ID']).select2()
                                        $("#Depot_UOM").val(v1.responseJSON[0]['UOM_ID']).select2()
                                        $("#MaterialIsBusy").remove();
                                        $("#addUOMAlert").addClass("alert alert-success").show().html(Submitted_Successfully);
                                        setTimeout(function () {
                                            $("#addUOM").modal('hide')
                                        }, 1500)
                                    } else {
                                        $("#addUOMAlert").addClass("alert alert-danger").show().html(response);
                                    }
                                    setTimeout(function () {
                                        $("#addUOMAlert").hide()
                                    }, 1500)
                                } else {
                                    $("#addUOMAlert").addClass("alert alert-danger").show().html(Failed_Submit);
                                }
                                $("#MaterialIsBusy").remove();
                            }
                        })
                    } else {
                        $("#addUOMAlert").addClass("alert alert-danger").show().html(Required_Fields);
                    }
                });
                $("#CloseUOM").on("click", function () {
                    $("#addUOM input").val('');
                    //$("#AddProductPostForm").validate().resetForm();
                    $("#addUOM").modal("hide");
                })
                $("#addUOM input").val('');
            });
</script>