@extends('layouts.app')

@section('content')
<style>
.form-team{
  margin-left:16px;
  width:90%;
}
.form-team i{
  color:grey;
  float:left;
  font-size:25px;
}
.divider-left{
  background-color: #fff;
  padding: 10px;
  margin:10px -7px 10px 0px;
  box-shadow: 4px 4px 10px 4px #ececec;
  min-height:100vh;
}
.divider-right{
  background-color: #fff;
  padding: 10px;
  margin:10px 0px 10px -7px;
  box-shadow: 4px 4px 10px 4px #ececec;
  min-height:100vh;
}
.heading_main{
  font-size:22px;
  color:#1a1a1a;
  margin-left:20px;
}
</style>
    <!-- Page Content -->
    <div class="content container-fluid" style="padding: 2px;">
    
      <!-- Page Header -->
      <div class="project-page-header">
        @include('project.project-menu')         
      </div>
      <!-- /Page Header -->
            <div class="row">
              <div class="col-md-12">
                <div class="divider-left">
                <div class="row">
                  <h3 class="heading_main">Add your team</h3>

                    <form method="post" action="{{route('client/project/addUser')}}" id="inviteTeamMemberForm" class="form-team">  
                    @csrf
                    <div class="row">
                    <div class="col-md-8">                                        
                        <div class="form-group">                          
                          <div class="input-group">
                             <div class="input-group-prepend">
                              <span class="input-group-text"><i class="fa fa-user"></i></span>
                             </div>
                             <select id="client_team_list" name="team_list[]" class="select form-control" multiple>
                            
                             </select>
                          </div>
                          <small>To add a teammate who’s not on Techsaga, you need to <a href="javascript:;" class="inviteUsertBtn">Create Them First</a>
                          </small>
                        </div>
                      </div>
                      <div class="col-md-2">
                        <input type="hidden" name="project_id" value="{{Request::segment(3)}}">
                        
                        <button type="submit" class="btn btn-primary">Add </button>
                        
                      </div>
                    </div>
                    </form>
                </div>
                
                <div class="row">
                  @if(count($project_client) > 0 )
                  @foreach($project_client as $item)
                    <div class="col-md-2 col-xs-12 ">
                        <div class="profile-widget">
                          <div class="profile-img">
                            <a href="" class="avatar">
                              <img style="width: 80px; height: 80px;" src="{{Techsaga::getUserImage($item->id)}}" alt="">
                            </a>
                          </div>
                          <div class="dropdown profile-action">
                            <a href="#" class="action-icon dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="material-icons">more_vert</i></a>
                            <div class="dropdown-menu dropdown-menu-right" x-placement="bottom-end" style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(24px, 32px, 0px);">
                              <a class="dropdown-item removeUser"  href="javascript:;"  id="{{$item->id}}"  >
                                <i class="fa fa-trash m-r-5"></i> Remove</a>
                              <a class="dropdown-item" href="#" ><i class="fa fa-undo m-r-5"></i> Invite Again</a>
                            </div>
                          </div>
                          <h4 class="user-name m-t-10 mb-0 text-ellipsis"><a href="">{{$item->first_name.' '.$item->last_name}}</a></h4>
                          
                        </div>
                      </div>
                    @endforeach
                    @else
                    <div class="col-md-12 ">
                      <h3>Member not assigged yet!</h3>
                    </div>
                    @endif

                </div>
                </div>
              </div>
              <!--  -->
             
            </div>     
    </div>
  <!-- /Page Content -->
<!-- invite new client Modal -->
<div class="modal custom-modal fade" id="inviteModal" role="dialog">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body">

            <form method="post" id="invite_client_form" action="{{route('client/invite/newMember')}}">
                @csrf
                <div class="form-header">
                    <h3>Invite a Member</h3>                    
                <div class="add-client-tip" style="border: 1px solid #0083d9;padding: 12px;">
                   <p> <i class="fa fa-user-plus"></i> Adding a Member into project: </p>
                   <p>1. Invite first - System will send a link on User's email with secret code to verify email is active?</p>
                   <p>2. User will fill the form with profile detail to access system.</p>
                   <p>2. When invitation accepted, member will be auto added into project.</p>
                </div>
                </div>
                
                <div class="form-group">
                <label>First Name <span class="text-danger">*</span></label>
                    <input class="form-control" type="text" name="first_name">
                    <p style="margin-bottom: 2px;" class="text-danger" id="error-first_name"></p>  
                </div>

                <div class="form-group">
                <label>Last Name </label>
                    <input class="form-control" type="text" name="last_name">
                </div>
                <div class="form-group">
                    <label>Email Address <span class="text-danger">*</span></label>
                    <input class="form-control" type="text" name="email">
                    <p style="margin-bottom: 2px;" class="text-danger" id="error-email"></p>  
                </div>

                <div class="modal-btn delete-action" style="margin-top: 25px;">
                    <div class="row">
                        <div class="col-6">
                            <input type="hidden" name="project_id" value="{{Request::segment(3)}}">
                            <button type="submit" class="btn btn-primary continue-btn" data-loading-text="sendig...">Send Invitation </button> 
                        </div> 
                        <div class="col-6">
                            <a href="javascript:void(0);" data-dismiss="modal" class="btn btn-primary cancel-btn">Cancel</a>
                        </div>
                    </div>
                </div>
            
            </form>

            </div>
        </div>
    </div>
</div>     
<!--  -->    

@stack('scripts')

<script type="text/javascript">
//
$(document).ready(function() {

$(document).on('click','.inviteUsertBtn',function(){
    $('#inviteModal').modal();
});

// submit form
$(document).on('submit', 'form#invite_client_form', function (event) {
    event.preventDefault();
    var form = $(this);
    var data = new FormData($(this)[0]);
    var url = form.attr("action");
    var $btn = $(this);
    
    $('.continue-btn').button('loading');

    $.ajax({
        type: form.attr('method'),
        url: url,
        data: data,
        cache: false,
        contentType: false,
        processData: false,
        success: function (data) {
          
           $('.continue-btn').button('reset');

            $('.is-invalid').removeClass('is-invalid');
            if (data.fail) {
                for (control in data.errors) {
                    $('input[name=' + control + ']').addClass('is-invalid');
                    $('#error-' + control).html(data.errors[control]);
                }
            } else {
                $('#modalForm').modal('hide');
                 alert("Invitation has sent to Client!");
            }
        },
        error: function (xhr, textStatus, errorThrown) {
            alert("Error: " + errorThrown);
        }
    });
    return false;
});

//
$(document).on('click','.removeUser',function(event){
  event.preventDefault();
  console.log("Please be patient, it will work soon!");
  var user_id = $(this).attr('id');
  
  if(confirm("Are you sure want to remove?"))
  {
    $(this).parents('.controls').html("<p>Removing...</p>");
  
  // return false;
  $.ajax({
   url: "/removeUser",
   method:"POST",
   data:{"user_id":user_id,"project_id":"{{Request::segment(3)}}","_token": "{{ csrf_token() }}"},
  
   success:function(data)
   {
     console.log(data);     
     if(data.status == 'ok')
     {
         window.location.reload();
        /*$('.'+user_id).remove();
        $('.messageResult').html("<div class='alert alert-success alert-dismissible'> <a href='#' class='close' data-dismiss='alert' aria-label='close'>&times;</a> <strong>Success!</strong> User has been Removed.</div>");*/
     }
   }
  });
}
});


// submit form
$(document).on('submit', 'form#inviteTeamMemberForm', function (event) {
    event.preventDefault();
    var form = $(this);
    var data = new FormData($(this)[0]);
    var url = form.attr("action");
    $.ajax({
        type: form.attr('method'),
        url: url,
        data: data,
        cache: false,
        contentType: false,
        processData: false,
        success: function (data) {
            $('.is-invalid').removeClass('is-invalid');
            if (data.fail) {
                for (control in data.errors) {
                    $('input[name=' + control + ']').addClass('is-invalid');
                    $('#error-' + control).html(data.errors[control]);
                }
            } else {
                $('#modalForm').modal('hide');
                window.location.reload();
            }
        },
        error: function (xhr, textStatus, errorThrown) {
            alert("Error: " + errorThrown);
        }
    });
    return false;
});
//

});

</script>
                 
@endsection