@extends('dashboard.base')

@section('content')
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet"/>
<style type="text/css">
  .box{
    width:600px;
    margin:0 auto;
   }
   
</style>
<div class="container-fluid">
    <div class="animated fadeIn">
        <div class="row">
            <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12">
                <div class="card">
                    <div class="card-header">
                        <h4>View User Group</h4>
                    </div>
                    <div class="card-body">
                      @if ($errors->any())
                        <div class="alert alert-danger">
                            <ul>
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                      @endif
                      <form method="POST" id="usergroup" name="usergroup" action="{{url('user-group-update/'.$usermange[0]->id)}}">
                            @csrf

                            <div class="form-group row ">
                              <div class="col-sm-6 required">
                                <input type="text"  class="form-control " id="groupname" value="{{$usermange[0]->group_name}}" name="groupname" placeholder="Group Name*" required/>
                              </div>
                            </div>

                            <div class="form-group row">
                              <div class="col-sm-6">
                                <textarea title ="Description"  class="form-control" id="description" name="description" placeholder="Description" >{{$usermange[0]->group_desc}}</textarea>
                              </div>
                            </div>
                           
                            <div class="form-group row col-md-12">
                                <label class="control-label">Create Group On:</label>
                            </div>   
                            <div class="form-group row">
                              <div class="col-sm-6 required">
                                <input {{($usermange[0]->group_on == '2,3' || $usermange[0]->group_on == 2) ? 'checked':''}} type="checkbox" name="utype" id="mini" value="2">
                                <label class="control-label">Minipol</label>
                                <input {{($usermange[0]->group_on == '2,3' || $usermange[0]->group_on == 3 ) ? 'checked':''}} type="checkbox" name="utype" value="3">
                                <label class="control-label">Pinipol</label>
                              </div>
                            </div>
                            <div class="form-group row col-md-12">
                                <label class="control-label">Group Owner:</label>
                            </div>  
                            <div class="form-group row ">
                              <div class="col-sm-6 required">
                                <input {{$usermange[0]->group_owner == 0 ? 'checked':''}} type="radio" name="group_owner" id="group_owner" value="0">
                                <label class="control-label">Admin</label>
                                <input {{$usermange[0]->group_owner == 1 ? 'checked':''}} type="radio" name="group_owner" id="group_owner" value="1">
                                <label class="control-label">User</label>
                                <input {{$usermange[0]->group_owner == 2 ? 'checked':''}} type="radio" name="group_owner" id= "group_owner" value="2">
                                <label class="control-label">Organization</label>
                              </div>

                            </div> 
                             <div class="form-group row col-md-12">
                                <label class="control-label">Group Owner Name: </label>
                                <label class="control-label">&nbsp;{{isset($usermange[0]->firstname) ? ucfirst($usermange[0]->firstname.' '.$usermange[0]->lastname): ''}}</label>
                                
                            </div> 
                             <div class="form-group row col-md-12">
                              <label class="control-label">Group Type:</label>
                              <div class="col-sm-6 ">
                                <select class = "" name = "group_type" id = "group_type">
                                  <option value = "0" {{$usermange[0]->group_type == 0 ? 'selected':''}}>Select Group Type</option>
                                  <option value = "1" {{$usermange[0]->group_type == 1 ? 'selected':''}}>Open Group </option>
                                  <option value = "2" {{$usermange[0]->group_type == 2 ? 'selected':''}}>Close Group</option>
                                </select>
                              </div>
                            </div> 
                    
                            <div class="form-group row ">
                              <div class="col-sm-6">
                                <select class="form-control select2-multiple " id="select2-2" multiple="" data-select2-id="select2-2"  name = "members[]" >
                                  </select>
                              </div>
                            </div>
                                
                            <a href="{{env('APP_URL','')}}/user-group-management" class="btn btn-primary">Back</a>
                           <a href="{{env('APP_URL','')}}/user-group-edit/{{($usermange[0]->id)}}" class="btn btn-primary">Edit</a>

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

@endsection
@section('javascript')
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script type = "text/javascript">
var newuseraaray = new Array();

$(document).ready(function(){
  $("#usergroup :input").prop("disabled", true); //to disable all fields, display as view, edit not allowed
  var utypeload = '{{$usermange[0]->group_on}}';
    utypeload  = utypeload.toString();
    utypeload = utypeload.split(',');
    console.log(utypeload);
  var group_ownerload = {{$usermange[0]->group_owner}};

    //ajax call to append user in add members...
    userajax(utypeload,group_ownerload,newuseraaray);
   
  function userajax(utype,group_owner,newuseraaray){
      // ajax call
      var user_id  = newuseraaray;
      console.log('user_id: ', user_id );
      
      $.ajax({
          url:"{{ route('fetchusers.check') }}",
          method:"POST",
          data:{utype:utype,group_owner:group_owner, "_token": "{{ csrf_token() }}"},
          success:function(result)
          {
            var users = "<option value='0'>Select User</option>";
            $(user_id).each(function(key1,value1){
              $(result).each(function(key,value){
                var selected = '';
                  if(value1 == value.id){
                   selected = 'selected';
                  }
                  users += "<option "+selected+" value='"+value.id+"'>"+value.firstname+"</option>";
              });
            });
           $('#select2-2').html(users);
           $("#select2-2").select2({
              tags: "true",
              allowClear: true,
              placeholder: "Add Members",
              //minimumInputLength: 2 // only start searching when the user has input 3 or more characters
           });    
          }
      });
   }
  
});

  
 
  
</script>
@endsection