@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;
   }
    #usergroup fieldset:not(:first-of-type) {
    display: none;
  }

  .container {
  display: block;
  position: relative;
  padding-left: 29px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 18px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

}

/* Hide the browser's default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
  /* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 48px;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border-radius: 15px;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 9px;
  top: 4px;
  width: 7px;
  height: 14px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
#user_group_setting .list-group-item{
  border 0px !important;
}
.setting_span{
  float: left;
  width: 50%;
  text-align: center;

}
.setting_user {
    margin-top: 20px;
    float: left;
}
.reset_label{
  float: left;
  margin-top:-28px;
}
.custom_select2_cls label#select2-2-error {
    position: absolute;
    top: 40px;
}
.form-group.row.custom_select2_cls {
    margin-bottom: 30px;
}
.select2-selection__choice{
    margin-right: 6px !important;
  }
  label[id="utype[]-error"]{
    position: absolute;
    top: 21px;
    left: -110px;
  }
</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>Edit 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
                          <fieldset id = "user_group_form">

                            <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 utype_cls">
                                <label class="control-label">Create Group On:</label>
                              <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 class="col-sm-6 required">
                                <input class = "group_owner"  type="radio" name="group_owner" id="group_owner" value="0" {{$user[0]->account_type == 0 ? 'checked':''}}>
                                <label class="control-label">Admin</label>
                                <input class = "group_owner" type="radio" name="group_owner" id="group_owner" value="1" {{$user[0]->account_type == 1 ? 'checked':''}}>
                                <label class="control-label">User</label>
                                <input class = "group_owner" type="radio" name="group_owner" id= "group_owner" value="2" {{$user[0]->account_type == 2 ? 'checked':''}}>
                                <label class="control-label">Organization</label>
                              </div>

                            </div>

                            <div class="form-group row group_owner_id hide">
                              <div class="col-md-6">
                                <select id = "user_id" name = "user_id" placeholder = "Select User" class="form-control" >
                                  <option value="{{$user[0]->id}}">Select User Name</option>
                                </select>
                              </div>

                            </div>
<div class="form-group row col-md-12">
                              <label class="control-label">Group Type:</label>
                              <div class="col-sm-6 ">
                                <select class = "form-control" 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 custom_select2_cls">
                              <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 class="col-sm-6">
                                 <input type="button" id="okButton" class="next btn btn-info" value="Manage group">

                              </div>
                            </div>

                            <button class="btn btn-success" type="submit">Update</button>
                            <a href="/user-group-management" class="btn btn-primary">Cancel</a>
                           </fieldset>
                          <fieldset id = "user_group_setting">
                            <div class="form-group row ">
                              <h5 >Manage members Settings</h5>
                              <hr>
                            </div>
                            <div class="form-group row ">
                              <div class="col-sm-6 ">

                                  <label class="control-label">Member Settings:</label>
                                  <input type="radio" name="member_setting" id="member_setting1" class = "list_radio" value="0"> Only Vote on Poll
                                  <input type="radio" name="member_setting" id="member_setting2" class = "list_radio" value="1"> Post Poll and Vote on Poll
                                  <a href = "javascript:void(0);" class = "member_reset" style= "cursor:pointer;"><i class="c-icon c-icon-2xl mt-5 mb-2  cil-reload"></i></a>
                              </div>
                            </div>
                            <div class="form-group row ">
                              <div class="col-sm-6 ">
                                <ul class="list-group">
                                </ul>
                              </div>
                            </div>
                            <div class="form-group row ">

                              <div class="col-sm-6 ">

                              <a href="javascript:void(0);" class="btn btn-success previous">Save</a>
                              <a href="javascript:void(0);" class="btn btn-primary reset">Cancel</a>
                              </div>
                            </div>

                        </fieldset>
                        </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">

 $("#user_id").select2({
      tags: "true",
      allowClear: true,
  });
 $("#group_type").select2({
      tags: "true",
      allowClear: true,
  });
  $(".group_owner").change(function(){
      var val = this.value;
      if(val!= 0){
        $('.group_owner_id').removeClass('hide');
      } else{
        $('.group_owner_id').addClass('hide');

      } 
  });
  var group_owner = {{$usermange[0]->group_owner}};
  var group_user_idd = {{$usermange[0]->user_id}};

  //remove on page load..
    $("#select2-2 option[value="+group_user_idd+"]").remove();

  if(group_owner != 0){
    $('.group_owner_id').removeClass('hide');
  }else{
    $('.group_owner_id').addClass('hide');

  }
  var pausecontent = new Array();
  var user_role_arr = new Array();
  var post_poll_arr = new Array();
  var vote_poll_arr = new Array();
        console.log('user_role_arr: ' +user_role_arr);
    console.log('post_poll_arr: ' +post_poll_arr);
    console.log('vote_poll_arr: ' +vote_poll_arr);
  var newuseraaray = pausecontent;
$(document).ready(function(){

    $(".next").click(function(){

    if ($("#select2-2").val() == null) {
      alert('Please first add Member!');
    }else{
      var group_owner = $("input[name='group_owner']:checked").val();
      var ids = $("#select2-2").val();
      var group_owner_id = $("#user_id").val();
     
      console.log('ids');
      // ajax call to fecth user name with their id;
      $.ajax({
         url:"{{ route('fetchusername.check') }}",
         method:"POST",
         data:{group_owner_id:group_owner_id,ids:ids, "_token": "{{ csrf_token() }}"},
         success:function(result)
          {
            console.log(result);
            var listing = '<li class="list-group-item d-flex list-group-item-action justify-content-between align-items-center"><span class="setting_span">Admin</span><span class="setting_span">Post Poll</span><span class="setting_span">Vote Poll</span><span class="setting_span"></span></li>';
            $(result).each(function(key,value){
              user_role_checked = "";
              post_poll_checked = "";
              vote_poll_checked = "";
              if(user_role_arr[key] == "1"){
                user_role_checked = 'checked';
              }
              if(post_poll_arr[key] == "1"){
                post_poll_checked= 'checked';
              }
              if(vote_poll_arr[key] == "1"){
                vote_poll_checked= 'checked';
              }
              console.log('vote poll: '+vote_poll_arr[key]);
              listing += '<input type = "hidden" name = "setting_rows[]" value = "'+key+'"><li class="list-group-item d-flex list-group-item-action justify-content-between align-items-center">';
              listing += '<label class="container"><input '+user_role_checked+' type="checkbox" data-id = "'+key+'" class = "admin_checkbox admin_row_'+key+' list_checkbox common_checkbox_'+key+' " id = "admin"><input type = "hidden"  class = "user_permission user_checkbox_val user_val_'+key+'" name= "user_role[]" value = "'+user_role_arr[key]+'"><span class="checkmark"></span></label>';
              listing += '<label class="container"><input '+post_poll_checked+' type="checkbox" data-id = "'+key+'" class = "post_poll_checkbox list_checkbox common_checkbox_'+key+' " id = "post_poll"><input type = "hidden"  class = "user_permission post_poll_val_'+key+' post_checkbox_val"  name= "post_poll[]" value = "'+post_poll_arr[key]+'"><span class="checkmark"></span></label>';
              listing += '<label class="container"><input '+vote_poll_checked+' type="checkbox" data-id = "'+key+'" class = "vote_poll_checkbox list_checkbox common_checkbox_'+key+' "  id = "vote_poll" ><input type = "hidden"  class = "user_permission vote_poll_val_'+key+' vote_checkbox_val" name= "vote_poll[]" value = "'+vote_poll_arr[key]+'"><span class="checkmark"></span></label>';
              listing += '<label class="container"><span class="setting_user">'+value.username+'<input type="hidden" name = "setting_user_id[]" value ="'+value.id+'"></span></label>';
              listing += '<label><a  class="reset_label reset_admin_'+key+'" href = "javascript:void(0);" onclick = "user_reset('+key+')"><i class="c-icon c-icon-2xl mt-5 mb-2 cil-reload"></i></a></label></li>';
            });
            $('.next').css('display','block');
            $('.list-group').html(listing);
            if(group_owner != 0){
              
              $('.user_val_0').val('1');
              $('.admin_row_0').prop('checked',true).attr("disabled",true);
              $('.reset_admin_0').addClass("hide");

            }
          }
       });
        $('#user_group_setting').show();
        $('#user_group_form').hide();
     }


    });
    $(".previous").click(function(){
      $('#user_group_form').show();
      $('#user_group_setting').hide();
    });
    $('.reset').click(function(){

      $('.list_checkbox').prop("checked", false );
      $('.list_radio').prop("checked", false );
      $('#user_group_form').show();
      $('#user_group_setting').hide();
    });
    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);

   $(document).on('change' ,'#utype',function(){ // bind a function to the change event

        var group_owner = $('input[name="group_owner"]:checked').val(); // retrieve the value
        var utype = [];
        if( $(this).is(":checked") ){ // check if the checkbox is checked
          //var utype       = $(this).val(); // retrieve the value
          $('input[name="utype[]"]:checked').each(function() {
               utype.push(this.value);
          });
          if(group_owner){
            userajax(utype,group_owner,newuseraaray); // ajax call
          }

        }else{
          $('input[name="utype[]"]:checked').each(function() {
               utype.push(this.value);
          });
          if(utype){
              userajax(utype,group_owner,newuseraaray); // ajax call
          }
        }
    });
    $(document).on('change' ,'#group_owner',function(){ // bind a function to the change event

        var utype = [];
        var group_owner = $(this).val(); // retrieve the value
        if( $(this).is(":checked") ){ // check if the radio is checked
          //var utype       = $('input[name="utype"]:checked').val(); // retrieve the value

          $('input[name="utype[]"]:checked').each(function() {
               utype.push(this.value);
          });
          userajax(utype,group_owner, newuseraaray); // ajax call
        }
    });
    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 listing = '<li class="list-group-item d-flex list-group-item-action justify-content-between align-items-center"><span class="setting_span">Admin</span><span class="setting_span">Post Poll</span><span class="">Vote Poll</span><span class="setting_span"></span></li>';
            //var users = "<option value='0'>Select User</option>";
            var users = '';
            var users1 = '<option value = "0">Select Group Owner Name</option>';
            $(user_id).each(function(key1,value1){
             var group_user_id  = {{$usermange[0]->user_id}};
             
              $(result).each(function(key,value){
                var selected = '';
                var selected1 = '';
                  if(value1 == value.id){
                   selected = 'selected';
                  }
                  if(group_user_id == value.id){
                   selected1 = 'selected';
                  }
                  users += "<option "+selected+" value='"+value.id+"'>"+value.username+"</option>";
                  users1 += "<option "+selected1+" value='"+value.id+"'>"+value.username+"</option>";
              });
            });
           $('#select2-2').html(users);
           $("select#user_id").html(users1).select2({tags: "true",allowClear: true});

           $("#select2-2").select2({
              //tags: "true",
              allowClear: true,
              placeholder: "Add Members",
              //minimumInputLength: 2 // only start searching when the user has input 3 or more characters
           });

           //display manage members button...
            //$('.next').css('display','block');

            //$('.list-group').html(listing);

          }
      });
   }
   $(document).on('change','select#user_id',function(){
      var val = this.value;
      $("#select2-2 option[value="+val+"]").remove();

   });
   $(document).on('click','.post_poll_checkbox',function(){

    var rowval = $(this).data('id');
    if ($('.post_poll_checkbox').is(':checked')) {
      $('.post_poll_val_'+rowval).val('1');
    }else{
      $('.post_poll_val_'+rowval).val('');
    }
   });
   $(document).on('click','.admin_checkbox',function(){
    var rowval = $(this).data('id');
    if ($('.admin_checkbox').is(':checked')) {
      $('.user_val_'+rowval).val('1');
    }else{
      $('.user_val_'+rowval).val('');
    }
   });
   $(document).on('click','.vote_poll_checkbox',function(){
    var rowval = $(this).data('id');
    if ($('.vote_poll_checkbox').is(':checked')) {
      $('.vote_poll_val_'+rowval).val('1');
    }else{
      $('.vote_poll_val_'+rowval).val('');
    }
   });

  $('#member_setting1').change(function(){
      $('.post_checkbox_val').val('');
      $('.vote_checkbox_val').val(1);
      $('.vote_poll_checkbox').prop('checked',true);
      $('.post_poll_checkbox').prop('checked',false);
   });
   $('.member_reset').click(function(){
      $('#member_setting1').prop('checked',false);
      $('#member_setting2').prop('checked',false);
      $('.post_poll_checkbox').prop('checked',false);
      $('.vote_poll_checkbox').prop('checked',false);
      $('.user_permission').val('');
   });
   $('#member_setting2').change(function(){
      $('.post_poll_checkbox').prop('checked',true);
      $('.vote_poll_checkbox').prop('checked',true);
      $('.post_checkbox_val').val('');
      $('.vote_checkbox_val').val(1);
   });

});

function user_reset(row){
  $('.common_checkbox_'+row ).prop('checked',false);
}

jQuery.validator.addMethod("lettersonly", function(value, element) {
    return this.optional(element) || /^[0-9a-z\s]+$/i.test(value);
}, "Only alphabetical characters and numbers");


jQuery.validator.addMethod("alphanumeric", function (value, element) {
    // return this.optional(element) || /^\w+$/i.test(value);
    return this.optional(element) || /^[a-zA-Z0-9@_-]+$/i.test(value);
}, "Letters, numbers, hypen, underscores and @ only please");




 $( "#usergroup" ).validate({
          rules: {
            groupname: {
                  required: true,
                  maxlength:25
              },
              group_type: {
                  required: true,
                  
              },
              'utype[]': {
                  required: true,
                  
              },
              description: {
                  maxlength:150
              },

          }
  });






</script>
@endsection