
<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="createUserGroup" tabindex="-1" role="dialog" aria-hidden="true" style="    width: 50%;
     margin: 0 auto;">
    <div class="modal-dialog ">
        <?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-14"></i></button>
                <h5><span class="semi-bold"><?php print CommonLanguage::getMessage('add_usr_grp'); ?> </span></h5>
            </div>
            <div class="modal-body">
                <div id="EmployeeValidationAlert"></div>
                <input type="hidden" id="IsEdit" value="0"/>
                <input type="hidden" id="group_id"/>
                <form id="AddUserGroup" method="POST" onsubmit="return false">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="col-md-3">
                                <label><?php echo CommonLanguage::getMessage('grp_name') ?></label><span class="red-star">*</span>
                                <input type="text" class="form-control grp_name" id="grp_name" />
                            </div>
                            <div class="col-md-9">
                                <label><?php echo CommonLanguage::getMessage('employees') ?></label><span class="red-star">*</span>
                                <input type="hidden" name="grp_usr" id="grp_usr" class="full-width grp-usr"/>
                            </div>

                        </div>
                    </div> 
                    <br>
                    <div class="row">
                        <div class="col-md-12 " >

                            <div class="col-md-4 pull-right">
                                <button class="btn btn-default" id="close_grp_user"   > <?php print CommonLanguage::getMessage('Close'); ?> </button>
                                <button class="btn btn-success " id="submit_grp_user"  > <?php print CommonLanguage::getMessage('Save'); ?>   </button>
                            </div>
                        </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')); ?>,
            Required_Fields = <?php echo json_encode(CommonLanguage::getMessage('Required_Fields')); ?>;
    Data_Exists = <?php echo json_encode(CommonLanguage::getMessage('Data_Exists')); ?>;
    var today = <?php echo json_encode($today) ?>;
    var Is_Edit = false;
    $(function () {

        build_select2($('#grp_usr'), 'xhr/UserSearch', 1);


        $("#tableWithSearch").on("click", ".Action .Edit", function () {
            id = $(this).parents("tr").find('.Action').attr('data-id');
            Is_Edit = true;
            $("#createUserGroup").modal('show');
            $('#IsEdit').val(1);
            $.ajax({
                url: 'HRMAjax/getUserGroupInfoRequest?grp_id=' + id,
                dataType: 'json',
                complete: function (v1, v2) {
                    var Data = v1.responseJSON;
                    var user_id = Data['data'];
                    if (v2 == 'success') {
                        build_select2($('#grp_usr'), 'xhr/UserSearch', 1);
                        $('#grp_name').val(Data[0]['group_name']);
                        $('#group_id').val(Data[0]['group_id']);
                        var selectedItems = [];
                        for (var x = 0; x < user_id.length; x++) {
                            selectedItems.push(user_id[x]);
                        }
                        $('#grp_usr').select2('val', []);
                        $('#grp_usr').data().select2.updateSelection(selectedItems);
                    }
                }
            });
        });
        $('#submit_grp_user').on('click', function () {

            if ($('#grp_name').val() == '' || $('#grp_usr').val() == undefined || $('#grp_usr').val() == '') {
                $('#EmployeeValidationAlert').attr('class', 'alert alert-danger').empty().html(Required_Fields);
                return false;
            } else {
                $('#EmployeeValidationAlert').addClass('hidden');
                var Data = {
                    group_name: $('#grp_name').val(),
                    user_ids: $('#grp_usr').val()
                };
                if ($('#IsEdit').val() == '1') {
                    Data.group_id = $('#group_id').val();
                }
                $.ajax({
                    url: 'HRMAjax/CreateUserGroupRequest',
                    data: Data,
                    method: 'POST',
                    dataType: 'json',
                    complete: function (v, v1) {
                        if (v1 == 'success') {
                            if (v.responseJSON[0] == 'ok') {
                                $('#EmployeeValidationAlert').attr('class', 'alert alert-success').empty().html(Submitted_Successfully);
                                RebuildDataTable(title, [0], 'HRMAjax/viewUserGroupRequest');
                                setTimeout(function () {
                                    $("#createUserGroup").modal('hide');
                                    $('#EmployeeValidationAlert').addClass('hidden');
                                    empty();
                                    $('#IsEdit').val(0);
                                }, 800);
                            } else {
                                $('#EmployeeValidationAlert').attr('class', 'alert alert-danger').empty().html(Data_Exists);
                            }
                        } else {
                            $('#EmployeeValidationAlert').attr('class', 'alert alert-danger').empty().html(v.responseJSON[1]);
                        }

                    }
                });
            }
        });
        $('#close_grp_user').on('click', function () {
            empty();
        });



        function empty() {
            $('#IsEdit').val(0);
            $("#createUserGroup").modal('hide');
            $('#AddUserGroup input').val('');
            $('#grp_usr').select2('val', '');
        }
    });
</script>