@extends('layouts.header')

@section('content')
<h2 class="page-title my-4">Add Group </h2>
	 
	<div class="row">
		<div class="col-md-8">
			<P><a href="javascript:goBack(-1);" class="text-primary mb-3"><i class="fa fa-long-arrow-left" aria-hidden="true"></i> Back</a></P>
			<div class="card form-style bg-light p-md-5 p-3 ">

				<form id="groupForm" method="POST" action="javascript:void(0)">
                @csrf

                <div class="row">
					<div class="col-md-12 mb-3">
						<label>Group Name <span class="text-danger">*</span></label>
						<input type="text" class="form-control" name="name" id="name" value="{{ old('name')}}" placeholder="Enter group name">
                        @if ($errors->has('name'))
                          <span id="v-error" class="error text-danger" for="name">{{ $errors->first('name') }}</span>
                         @endif
                    </div>

					<div class="col-md-12 mb-3">
						<label>User<span class="text-danger">*</span></label>
						<div class="">
                            <select class="mySelect for" name="user_id[]" id="user_id" multiple="multiple" style="width: 100%;height: 45px !important;">
								@foreach($user_list as $user)
                                <option value="{{ $user->id }}">{{ $user->first_name}}&nbsp;{{ $user->last_name }}</option>
                                @endforeach
							</select>
                            @if ($errors->has('user_id'))
                          <span id="user_id-error" class="error text-danger" for="user_id">{{ $errors->first('user_id') }}</span>
                         @endif
						</div>
					</div>
					 
					<div class="col-12 text-left">
						<button type="button" class="btn btn-outline-primary mr-3" onClick="goBack();">Cancel</button>
						<button type="submit" class="btn btn-primary" id="btnAdd" onclick="submitForm()">Save</button>
					</div>
				</div>
                </form>

			</div>
		</div>
	</div>
	

	
</div>
@endsection


@section('append')
<script src="/assets/js/jquery.dataTables.min.js"></script>
	<script src="/assets/js/dataTables.bootstrap4.min.js"></script>
<script>
       $(".mySelect").select2({
            placeholder: "Select users",
            allowClear: false,
       });


function submitForm(){

    $("#groupForm").validate({
    errorElement:'div',
    rules: {
        name:{
            required: true,
        },
        "user_id[]":{
            required: true,
        }
    
    },

    messages: {
        name:{
            required: "Please enter group name",
        },
        "user_id[]":{
            required: "Please select users",
        }
    
    },

    errorPlacement: function(error, element) {
        if (element.hasClass('select2')) {
            error.insertAfter(element.parent());
            }
            else{
            error.appendTo( element.parent() );
            }
    },
    submitHandler: function(form) {
        //form.submit();

        var form = $('#groupForm')[0];
        var formData = new FormData(form);
        $.ajax({
            url: '/add/groups' ,
            type: "POST",
            data: formData,
            processData: false,
            contentType: false,
            beforeSend: function(){
                $('#btnAdd').addClass('btn-disabled');
                $('#btnAdd').html("<span class='spinner-border spinner-border' id='loader' style='width:20px;height:20px;'></span> Please wait...");
            },
            success: function( data ) {
            if(data.success != undefined){
                toastr.success(data.success); 
                $('#groupForm')[0].reset();
                setTimeout(() => {
                    window.location.href="/manage/groups";
                }, 2000); 
                }else{
                toastr.error(data.error); 
                }
                
            },
            complete: function(){
            setTimeout(function(){
                $('#btnAdd').removeClass('btn-disabled');
                $('#btnAdd').html('Save');
                },1000);
            },
            error: function(xhr,status,error){
                var err = JSON.parse(xhr.responseText);
                if(err.errors.name != undefined ){
                    toastr.error(err.errors.name);
                }
            },
        });

    },

    });

}


</script>

@endsection