@extends('layouts.app')
@section('content')

<div class="row">
  <div class="col-md-12 messageResult">

</div>
</div>

<div class="panel panel-default tech-service-page"> 
<div class = "panel-heading">
  <div class="row">
    <div class="col-md-8">
      <h2><a href="/project/view/{{$project->id}}">{{ ucfirst($project->projectName)}}</a></h2><div class="star" ></div>
    </div>       
   </div>
</div>

<div class="panel-body" style="min-height: 755px;"> 
   
<div class="tools has_tools_in_project has_tools_not_in_project">
  <div class="col-md-9">
  <div class="group in_project">
      <h4 style="margin: 0;">Here’s who’s on this project.</h4>            
  </div>   
  </div>
   <div class="col-md-3">
        <!--  -->
        <div class="group not_in_project text-right">
          <span class="" style="color:#969595">Created By : {{ ucfirst($project->createdBy)}} </span>              
            <span class="" style="color: #407286; font-size: 16px;"></span>              
        </div>
        <!--  -->
    </div>

</div> 

@if( auth()->user()->role_id == 1 || auth()->user()->role_id == 3 || auth()->user()->role_id == 4 || auth()->user()->role_id == 5 || auth()->user()->role_id == 6 )

<div class="col-md-12">

{!! Form::open(['route' => ['project/user',$project->id] ]) !!}
            
  <div class="formCover" style="padding: 50px">

  <ul class="nav nav-tabs">
    <li class="active"><a class="tabBtnBold" data-toggle="tab" href="#team">Our Team</a></li>
    <li><a class="tabBtnBold" data-toggle="tab" href="#client">Our Client</a></li>    
  </ul>

  <div class="tab-content">

    <div id="team" class="tab-pane fade in active">
      <div class="col-md-6" style="border-right: 1px solid #ddd; min-height: 400px;">
      <h3 style="font-size: 16px; font-weight: 400;"> Type names or emails to invite people to your team: </h3>
       <div class="row memberList"> 

          <div class="col-md-12 form-group memberEmail">           
          <div class="input-group mar-btm"><span class="input-group-addon"><span class=" glyphicon glyphicon-user"></span>  </span> 
            <input class="form-control autocomplete_member" type='text' data-type="member_email" id='member_email_1'  name='member_email[]'>
          </div>        
          </div>
          <div class="col-md-12 form-group memberEmail">           
            <div class="input-group mar-btm"><span class="input-group-addon"><span class=" glyphicon glyphicon-user"></span>  </span> 
            <input class="form-control autocomplete_member" type='text' data-type="member_email" id='member_email_2' name='member_email[]'>
            </div>        
          </div>

          <div class="col-md-12 form-group memberEmail">           
            <div class="input-group mar-btm"><span class="input-group-addon"><span class=" glyphicon glyphicon-user"></span>  </span> <input class="form-control autocomplete_member" type='text' data-type="member_email" id='member_email_3' name='member_email[]'>
            </div>        
          </div>
          <!-- <div class="col-md-12 form-group memberEmail"> 
            <button type="button" class="btn btn-sm btn-success addbtn">+ Add More</button>
          </div> -->
          
          <div class="col-md-12 form-group "> 
          <label style="font-weight: 400">Add a welcome message for your team: </label>          
               <textarea name="member_custom_message" class="form-control">Hi there. We’ll be using Techsaga Live System to track progress during this project.</textarea>
          </div>

          <div class="col-md-12 form-group ">           
            <button type="submit" name="" class="btn btn-sm btn-success"> Send Invitation  </button>     
          </div>
                    
        </div>

      </div>
      <div class="col-md-6 teamContainer">
        <h3>Your Team</h3>
        <section>
          <style type="text/css">
            article.access{ margin-bottom: 0; }
          </style>

          @foreach($assignedUser as $item)
          <article class="access col-md-12" id="access_157958625" data-person-id="12503510">
            <div class="row">
              <div class="col-md-2">

              <a data-replace-stack="true" href="">
                <img alt="{{ $item->first_name}}" class="avatar" src="{{Techsaga::getUserImage($item->id)}}" title="{{ $item->first_name}}" width="49" height="49"></a>
              </div>
              <div class="col-md-10">
                <div class="row">
                <h1> <a class="person_name" href="#">
                  @if (is_null($item->first_name))
                  {{$item->email}}
                  @else
                  {{ $item->first_name.' '.$item->last_name }} <span style="color:red; font-size: 14px; font-weight: normal;">({{$item->roleName}})</span>
                  @endif
                </a>  
                </h1>
                <div class="email">
                  <a href="mailto:{{$item->email}}">{{$item->email}}</a>
                </div>                
                <div class="controls" style="color: red">
                   @if ($item->is_verified==0)
                    Not Connected Yet.                  
                  @endif
                  <!-- remove user -->
                  @if( auth()->user()->role_id == 1)
                  <i style="color:#ddd" class="fa fa-star"></i> 
                    <a style="text-decoration: underline;color: red;" href="javascript:;" class="removeUser" id="{{$item->id}}" > Remove </a>
                  @endif
                </div>
              </div>
              </div>
            </div>
          </article>
          @endforeach

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

    <div id="client" class="tab-pane fade">
       <div class="col-md-6" style="border-right: 1px solid #ddd; min-height: 400px;">
      <h3 style="font-size: 16px; font-weight: 400;"> Type emails to invite your clients:  </h3>

       <div class="row clientInputs"> 

          <div class="col-md-12 form-group memberEmail">           
          <div class="input-group mar-btm"><span class="input-group-addon"><span class=" glyphicon glyphicon-user"></span>  </span> 
            <input class="form-control autocomplete_client" type='text' data-type="client_email" id='client_email_1'  name='client_email[]'>
          </div>        
          </div>
          <div class="col-md-12 form-group memberEmail">           
            <div class="input-group mar-btm"><span class="input-group-addon"><span class=" glyphicon glyphicon-user"></span>  </span> 
            <input class="form-control autocomplete_client" type='text' data-type="client_email" id='client_email_2' name='client_email[]'>
            </div>        
          </div>

          <div class="col-md-12 form-group memberEmail">           
            <div class="input-group mar-btm"><span class="input-group-addon"><span class=" glyphicon glyphicon-user"></span>  </span> <input class="form-control autocomplete_client" type='text' data-type="client_email" id='client_email_3' name='client_email[]'>
            </div>        
          </div>
          <!-- <div class="col-md-12 form-group memberEmail"> 
            <button type="button" class="btn btn-sm btn-success addbtn">+ Add More</button>
          </div> -->
          
          <div class="col-md-12 form-group "> 
          <label style="font-weight: 400">Add a welcome message for your Client: </label>          
               <textarea name="client_custom_message" class="form-control">Hi there. We’ll be using Techsaga Live System to track progress during this project.</textarea>
          </div>

          <div class="col-md-12 form-group ">           
            <button type="submit" name="" class="btn btn-sm btn-success"> Send Invitation  </button>     
          </div>
                    
        </div>
          
      </div>

      <div class="col-md-6 clientContainer">
        <h3>Your Client</h3>
        <section>
          @foreach($assignedClients as $item)

          <article class="access" id="{{$item->id}}" data-person-id="{{$item->id}}">
            <div class="wrapper {{$item->id}}">
              <a data-replace-stack="true" href="/2573162/people/12503510">
                <img alt="{{ $item->first_name}}" class="avatar" src="{{ asset('images/ts-avtar-40.png') }}" title="{{ $item->first_name}}" width="49" height="49"></a>
                <h1> <a class="person_name" href="#">
                  @if (is_null($item->first_name))
                  {{$item->email}}
                  @else
                  {{ $item->first_name.' '.$item->last_name }}
                  
                  @endif
                </a> </h1>
                
                <div class="email">
                  <a href="mailto:{{$item->email}}">{{$item->email}}</a>
                </div>                
                <div class="controls" style="color: red;">

                @if ($item->is_verified==0)
                    Not Connected Yet.   
                  @if( auth()->user()->role_id == 1 || auth()->user()->role_id == 3 || auth()->user()->role_id == 5)                               
                  <i style="color:#ddd" class="fa fa-star"></i> 
                  <a style="text-decoration: underline;" href="javascript:;" class="inviteAgain" id="{{$item->id}}" data="{{$item->email}}" >  Invite Again </a>
                  @endif
                @else
                  @if( auth()->user()->role_id == 1 || auth()->user()->role_id == 3)
                  <i style="color:#ddd" class="fa fa-star"></i> 
                    <a style="text-decoration: underline;color: red;" href="javascript:;" class="removeUser" id="{{$item->id}}" > Remove </a>
                  @endif
                @endif
                </div>
              </div>
          </article>
          @endforeach
         </section>
      </div>
    </div> 
  </div>

<input type="hidden" name="project_id" value="{{Request::segment(3)}}">

  {!! Form::close() !!}

    </div>  
</div>
  
  @endif


<!-- start client view to invite user  -->

@if( auth()->user()->role_id == 7 )

<div class="col-md-12">

{!! Form::open(['route' => ['project/addUser',$project->id] ]) !!}
            
  <div class="formCover" style="padding: 50px">

  <ul class="nav nav-tabs">
    <li class="active"><a class="tabBtnBold" data-toggle="tab" href="#team">Our Team</a></li>    
  </ul>

  <div class="tab-content">    

    <div id="team" class="tab-pane fade active in">
       <div class="col-md-6" style="border-right: 1px solid #ddd; min-height: 400px;">
      <h3 style="font-size: 16px; font-weight: 400;"> Type emails to invite your member:  </h3>

       <div class="row clientInputs"> 

          <div class="col-md-12 form-group memberEmail">           
          <div class="input-group mar-btm"><span class="input-group-addon"><span class=" glyphicon glyphicon-user"></span>  </span> 
            <input class="form-control autocomplete_client" type='text' data-type="client_email" id='client_email_1'  name='client_email[]'>
          </div>        
          </div>
          <div class="col-md-12 form-group memberEmail">           
            <div class="input-group mar-btm"><span class="input-group-addon"><span class=" glyphicon glyphicon-user"></span>  </span> 
            <input class="form-control autocomplete_client" type='text' data-type="client_email" id='client_email_2' name='client_email[]'>
            </div>        
          </div>

          <div class="col-md-12 form-group memberEmail">           
            <div class="input-group mar-btm"><span class="input-group-addon"><span class=" glyphicon glyphicon-user"></span>  </span> <input class="form-control autocomplete_client" type='text' data-type="client_email" id='client_email_3' name='client_email[]'>
            </div>        
          </div>
          <!-- <div class="col-md-12 form-group memberEmail"> 
            <button type="button" class="btn btn-sm btn-success addbtn">+ Add More</button>
          </div> -->
          
          <div class="col-md-12 form-group "> 
          <label style="font-weight: 400">Add a welcome message for your team: </label>          
               <textarea name="client_custom_message" class="form-control">Hi there. We’ll be using Techsaga to track progress during this project.</textarea>
          </div>

          <div class="col-md-12 form-group ">           
            <button type="submit" name="" class="btn btn-sm btn-success"> Send Invitation  </button>     
          </div>
                    
        </div>
          
      </div>

      <div class="col-md-6 clientContainer">
        <h3>Your Team</h3>
        <section>
          @foreach($assignedClients as $item)

          <article class="access" id="access_157958625" data-person-id="12503510">
            <div class="wrapper">
              <a data-replace-stack="true" href="/2573162/people/12503510">
                <img alt="Mithilesh  Sah" class="avatar" src="{{ asset('images/ts-avtar-40.png') }}" title="Mithilesh  Sah" width="96" height="96"></a>
                <h1> <a class="person_name" href="#">
                  @if (is_null($item->first_name))
                  {{$item->email}}
                  @else
                  {{ $item->first_name.' '.$item->last_name }}
                  @endif
                </a>  
                </h1>
                <div class="email">
                  <a href="mailto:{{$item->email}}">{{$item->email}}</a>
                </div>                
                <div class="controls" style="color: red;">                  
                  @if ($item->is_verified==0)
                    Not Connected Yet.                  
                  @endif
                </div>
            </div>
          </article>
          @endforeach
         </section>
      </div>
    </div> 
  </div>

<input type="hidden" name="project_id" value="{{Request::segment(3)}}">

  {!! Form::close() !!}

    </div>  
</div>
  
  @endif

  </div>


@stack('scripts')

<script type="text/javascript">
                   
var i=$('.memberList ').length;
$(".addbtn").on('click',function(){
  count=$('table tr').length;
  
  var data = "<div class='col-md-12 form-group '><div class='input-group mar-btm'><span class='input-group-addon'><span class='glyphicon glyphicon-user'></span> </span> <input class='form-control autocomplete_member' type='text' data-type='member_email' id='member_email_"+i+"' name='member_email[]'></div></div>";
    
  $('table').append(data);
  i++;
});
            
//autocomplete script
$(document).on('focus','.autocomplete_member',function(){
    
    type = $(this).data('type');
      
    if(type =='member_email' )autoType='name'; 
    if(type =='country_code' )autoType='sortname'; 
    var  p_id="