@extends('main')
@section('css')
<link href="{{ asset('/css/bootstrapValidator.min.css')}}" rel="stylesheet">
@endsection

@section('content')
<section class="main_content">
    <div class="container">
    <ol class="breadcrumb cust-breadcrumb">
              <li><a href="{{url('/')}}">Home</a></li>
              <li><a href="{{url('connectionview')}}">Connections</a></li>
              <li class="active">View Message</li>
            </ol>
             <div class="row">
            <div class="clearfix"></div>
             
              <div class="col-md-12" id="success_msg">
                  
             </div>
           </div>
      <div class="row talent_home">
        @include("left_menu")
        <div class="col-md-9 col-sm-9">
          <div class="rt-panel-block invite-to-join-page">  
           <div class="my-profiles-block"> 
          <h1 class="heading pull-left">I would like to Connect</h1>
                     
           
             <div class="row">
              
              
             
            <div class="col-md-12 mtop-0">
             <input type="hidden" name="_token" value="{{ csrf_token() }}">
             
             <div class="col-sm-12 findsiz mtop-0">
              <div class="row">    
                <div class="table-responsive visible-360 overflow-hid">			  
                  <table id="profile" class="table table-striped table-bordered invite-join-table" cellspacing="0" width="100%">
                    <thead>
                      <tr>
                        <th style="display:none" ></th>
                        <th>Profile</th>
                        <th>Contact Name/Email</th>
                        <th>Connections</th>
                       
                      </tr>
                   </thead>
 
                  <tbody>
                   @if(count($search_result))
                   @foreach($search_result['profiles'] as $pro)
                    <tr>
                        <td style="display:none"> <input type="hidden"  class="connect_id{{$pro->id}}" value="{{$pro->id}}"></td>
                      <td><div><a href="{{url('profiles/'.$pro->id)}}">
  		         @if($pro->profile_image)
                         <img class="img-responsive connect-pg-dp" src="{{url('uploads/profile_images/'.$pro->profile_image)}}" alt=""/>
                         @else                    
                         <img class="img-responsive connect-pg-dp" src="{{url('uploads/profile_images/default-profile.png')}}" alt=""/>
                         @endif  </a></div>
                      </td>
                      <td><a href="{{url('profiles/'.$pro->id)}}"><p class="conec_name">
                       {{$pro->name}}</p>
                         </a></td>
                         <td><button class="btn btn-success connect-pg-socila-btn" onclick="connect({{$pro->id}})" type="button">Connect</button></td>
                         
                  </tr>
                  @endforeach
                                    @foreach($search_result['emails'] as $mails)
                  <tr class="invite{{$i}}">
                     <td style="display:none"> <input type="hidden"  class="invite_id{{$mails}}" value="{{$mails}}"></td>
                     <td><div><img class="img-responsive connect-pg-dp" src="{{url('uploads/profile_images/default-profile.png')}}" alt=""/></div></td>
                     <td><p class="conec_name">{{$mails}}</p></td>
                     <td><button class="btn btn-success invite-pg-socila-btn" type="button" onclick="sendinvite('{{$mails}}','{{$i}}')">Invite to join platform</button></td>
                  </tr>
                                   @endforeach
                  @endif 
                </tbody>
               </table>
			   </div>
              <div id="LoadingImage" style="display: none;">
                 <img class="img-responsive" src="images/spin.gif" width="120" height="120" alt=""/>
              </div>
              </div>
            </div>  
         
         </div>
       </div>
</div>
</div>	   
      </div>
     </div>
    </div>
<!-- Reply Message Modal -->
    <div class="modal" id="connection_model" data-backdrop="static">
      <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
            &times;</button>
            <h4 class="modal-title" align="center">Connection Subject Information</h4>
            </div>
            <div class="modal-body">
                <form role="form"  method="GET"  name="connection_subject" id="connection_subject">

                 <input type="hidden" name="_token" value="{{ csrf_token() }}">
                 <input type="hidden" name="ids" id="ids">
                 <input type="hidden" name="checbox_val" id="checkbox_val" value="">
                <div class="form-group">
                   <label for="name">Title :</label>
                   <input type="text" class="form-control" id="conneciton_sub" name="conneciton_sub" 
                          placeholder="Enter subject" value="I would like to Connect" readonly="true">
                </div>
                <div class="form-group">
                    <label for="name">Message :</label>
                    <textarea id="connection_message" name="connection_message" class="form-control" ></textarea>
                </div> 
                <div class="modal-footer">
               <input type="button" value="Submit" id="connection_list" class="btn btn-primary">

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

        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div>    
</section>
@endsection
@section('js')
<script src="{{ asset('js/bootstrapValidator.min.js')}}"></script>
<script src="{{ asset('js/maskedinput/jquery.maskedinput.min.js')}}"></script>
<script src="{{ asset('js/bootbox.js')}}"></script>
<script src="{{ asset('js/jquery.dataTables.min.js')}}"></script>
<script src="{{ asset('js/dataTables.bootstrap.js')}}"></script>
<script type="text/javascript">  
   function connect(x)
   {       if(x!="")
           { 
               $('#ids').val(x);   
               $("#connection_model").modal('show');
           }
    }
    function sendinvite(x,y)
    {
        $("success_msg").html('');
      
       var dataString = 'ids='+ x +  '&_token=' + $("input[name=_token]").val();
      $("#LoadingImage").show(); 
        $.ajax({
                    url: "{{url('ajax_invite')}}",
                    type: 'get',
                    data: dataString,
                    success:function(data){
                        if($.trim(data))
                        {  
                             $('#success_msg').html(data);
                             $(".invite"+y).css("display","none");
                        }
                       
                        $("#LoadingImage").hide();
                    }
              });
    }
  
      //jquery data table
  $(document).ready(function() {
    $('#profile').DataTable( {
        responsive: true,
        "aLengthMenu": [[3, 6, 9, 12, 15, 25, 50, 75,-1], [3, 6, 9, 12, 15, 25, 50, 75, "All"]],
        "iDisplayLength": 9
    } );

$("#connection_list").click(function() {
        ajax_data = $("#connection_subject").serialize();
        $("success_msg").html('');
        
        $.ajax({
                    url: "{{url('ajax_connection')}}",
                    type: 'get',
                    data: ajax_data,
                    //data: ajax_data,
                    success:function(data){
                         $("#connection_model").modal('hide');
                        if($.trim(data))
                        { 
                             $('#success_msg').html(data);
                        }
                       
                       $("#connection_message").val('');
                     // alert(data);
                    }
              });
    });

} );
</script>

@endsection