
<!-- Create ROLE modal -->
<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="role-mode" id="create-role-modal" aria-hidden="true" style="display: none;     width: 40%;
     margin: 0 auto;">
    <div class="modal-dialog">
        <div class="modal-content">
            <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('create_new_access_level'); ?></h4>
                <br>
            </div>
            <div class="modal-body">
                <div class="form-group col-md-12">
                    <div  class=" col-md-6">
                         <label><?php print CommonLanguage::getMessage('role'); ?></label>
                        <input type="text" name="Role_Name"  id="Role_Name" placeholder="<?php print CommonLanguage::getMessage('access_level'); ?>" class="form-control input-rounded" required>
                    </div>
                    <div  class=" col-md-6 form-group">
                        <label><?php print CommonLanguage::getMessage('landing'); ?></label>
                        <select id='landing_id' class='full-width' data-init-plugin='select2'>
                            <?php foreach ($landings as $item) { ?>
                            <option value='<?php echo $item['landing_url'] ?>'><?php echo CommonLanguage::getMessage($item['landing_name']) ?></option>
                            <?php } ?>

                        </select>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" id="CloseAdd_Role" data-dismiss="modal"><?php print CommonLanguage::getMessage('Close'); ?></button>
                <button type="submit" class="btn btn-success disabled" id="Add_Role"><?php print CommonLanguage::getMessage('Save'); ?></button>
            </div>
        </div>
    </div>
</div>
<!-- End of Modal -->
<script>
    var Submitted_Successfully = <?php echo json_encode(CommonLanguage::getMessage('Submitted_Successfully')); ?>,
            Failed_Submit = <?php echo json_encode(CommonLanguage::getMessage('Failed_Submit')); ?>;
    $(function () {
        $("#Add_Role").on("click", function () {
            $("#CreateRoletValidationAlert").remove();
            var AlertBox = $('<div id="CreateRoletValidationAlert" class="WizardValidationAlert alert"></div>'), IsValidated = true;
            AlertBox.insertAfter($("#create-role-modal").find(".modal-dialog .modal-header").find("h4"))
            $("#CreateIsBusy").remove();
            $("#create-role-modal").append('<div id="CreateIsBusy" 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>');
            $("#CreateIsBusy").animate({opacity: 1});
            var Data = {
                Role_Name: $("#Role_Name").val(),
                landing: $("#landing_id").val()
            }
            $.ajax({
                url: "HRMAjax/createRoleModalRequest",
                method: "POST",
                data: Data,
                complete: function (v1, v2) {


                    if (v2 == 'success' && v1.responseText != 'Exists') {

                        $("#CreateIsBusy").remove();
                        $("#CreateRoletValidationAlert").addClass("alert-success").empty().html(Submitted_Successfully);
                        RebuildDataTable(title, [0], 'HRMAjax/viewRolesModalRequest', '', '#tableWithSearch1')
                        setTimeout(function () {
                            $("#create-role-modal").modal('hide')
                                    $("#CreateRoletValidationAlert").hide()
                        }, 1500)
                        setTimeout(function () {
                            $("#create-role-modal input").val('')
                        }, 2000)
                    } else {
                        $("#CreateRoletValidationAlert").addClass("alert-danger").empty().html(Failed_Submit);
                    }
                    $("#CreateIsBusy").remove();
                }
            })
        });
    });


    $("#Role_Name").on("keyup", function () {
        UpdateStatusButton()
    })
    function UpdateStatusButton() {
        var IsValidated = true;
        if ($("#Role_Name").val() == "") {
            IsValidated = false;
        }
        if (!IsValidated) {
            $("#Add_Role").addClass("disabled")
        } else {
            $("#Add_Role").removeClass("disabled")
        }
    }
    $("#CloseAdd_Role").on("click", function () {
        $("#Role_Name").val('');
    })
</script>