{!! Form::open(array('url' => '/client/saveGroup', 'id' => 'group-select-form', 'class' => 'm-form m-form--fit m-form--label-align-righ', 'autocomplete' => 'off')) !!}

    <input type="hidden" name="id" id="id" value="{{ !empty($user->id) ? Hasher::encode($user->id)  : ''}}" >

    <div class="form-group">
        <span class="m-badge  m-badge--info m-badge--wide m--icon-font-size-sm3" >{{ $user->name.' '.$user->last_name }}</span>
        <span class="m-badge  m-badge--info m-badge--wide m--icon-font-size-sm3" >{{ $user->email }}</span>
    </div>

    <div class="m-separator m-separator--dashed"></div>

    <!-- {{Form::CT_GROUP_SUBTEXT()}} -->

    <!-- to allow user to selct multiple groups  -->
    <div class="form-group" id="live-group">
        <label for="group" class="col-form-label">  Select Group </label>
        <select class="form-control m_selectpicker m-bootstrap-select " name="group" id="group" multiple required >
        @foreach ($groups as $group)
            <option data-subtext="{{$group->mt4_name}}" value="{{ $group->mt4_name }}">{{ $group->name }}</option>
        @endforeach
        </select>
    </div>

    <br><br><br>

    <div class="">
        <p class="m--font-danger"> Note : Client can only see below group list in their client-area.</p>
    </div>



{{ Form::close() }}
<!--end::Modal-->
<script type="text/javascript">
$(document).ready(function () {

    // Set Value of MULTI-SELECT from data-base
    var val = "{{ $data }}";
    $.each(val.split(","), function(i,e){
        $("#group option[value='" + e + "']").prop("selected", true);
    });

    $('.m_selectpicker').selectpicker({
        style: 'btn-default'
    });

    $("#group-select-form").validate({
        rules: {
            group: {
                required: true
            }
        },
        submitHandler : function (form) {
            var id = $('#id').val();
            var group = $('#group').val();
            $.post( base_url+"/client/clientWiseGroup", { 'user_id' : id , 'group_list' : group }, function( data ) {
                if (data.success) {
                    swal(data["success"], data[0] , "success")
                    .then((isOK) => {
                        eModal.close();
                        //table.ajax.reload(mApp.unblock("#group-select-form"), false);
                    }); //warning,success,error,info,question
                } else {
                    swal(data["error"], data[0] ,  "error")
                    .then((isOK) => {
                        (mApp.unblock('.modal-content'), true);
                        //table.ajax.reload(mApp.unblock("#group-select-form"), false);
                    });
                }
            });
            mApp.block('.modal-content', {
                overlayColor: '#000000',
                type: 'loader',
                state: 'success',
                message: 'Please Wait...'
            });
        }
    });
    // $('#m_blockui_4_4').click(function() {
    //     mApp.block('#m_blockui_4_4_modal .modal-content', {
    //         overlayColor: '#000000',
    //         type: 'loader',
    //         state: 'success',
    //         message: 'Please wait...'
    //     });

    //     setTimeout(function() {
    //         mApp.unblock('#m_blockui_4_4_modal .modal-content');
    //     }, 2000);
    // });
});
</script>