<!DOCTYPE html>
@extends('main')
@section('css')
<link href="{{ asset('/css/bootstrapValidator.min.css')}}" rel="stylesheet">
<style>
.contact-header {
    font-size: 0.9em;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    padding: 0px;
    border: 1px solid #acf;
}
.social-buttons {
    display: inline-table;
    text-align: left;
    position: relative;
}
.social-buttons a {
    margin: 0 0 0 7px;
    text-decoration: none;
    width: 28px;
    display: inline-block;
}
.contact-list {
    padding: 20px 15px;
    border: 1px solid #ccc;
    border-top: 0px;
    background-color: #f8f8f8;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}
.contact-list span {
    margin: 0 5px 0 0;
}
</style>@endsection
@section('content')
<section class="main_content">
    <div class="container">
    <ol class="breadcrumb cust-breadcrumb">
              <li><a href="{{url('/')}}">Home</a></li>
              <li class="active">Contacts</li>
            </ol>
      <div class="row talent_home">
        @include("left_menu")
      
        <div class="col-md-9 col-sm-9"> 
         <div class="rt-panel-block">  
           <div class="my-profiles-block"> 
          <div >
            <div class="col-md-12">
             
                <h1 class="import-contact-head">Import Contacts</h1></br>
<div class="contact-header">
<!--          Select people from your address book:-->
          <div class="social-buttons">
              <div>
                  @if(count($data) > 0)
                   {{--*/ $i = 1 /*--}}
              @foreach($data as $pic)
            <?php 
            if($pic['status']=='ON'){
                if($i==21){echo '<div class="mtop10"></div>';}
            ?>
              <a class="deep-link delayed" data-source="{{$pic['title']}}" title="{{$pic['title']}}" onclick="return cloudsponge.launch('{{$pic['importer']}}');"><img alt="{{$pic['title']}}" height="28" src="/images/icons/{{$pic['image']}}" title="{{$pic['title']}}" width="28"></a>
                {{--*/ $i++ /*--}}           
              <?php }?>
              
          
              @endforeach 
              @endif
        <!--      <a class="deep-link desktop-only"  title="Linkedin" stye="display: none;" onclick="return cloudsponge.launch('linkedin');"><img alt="Linkedin" height="28" src="/images/icons/linkedin.png" title="linkedin" width="28"></a>
              <a class="deep-link delayed" data-source="gmail" title="Gmail" onclick="return cloudsponge.launch('gmail');"><img alt="Gmail" height="28" src="/images/icons/gmail.png" title="Gmail" width="28"></a>
              <a class="deep-link delayed" title="Yahoo" onclick="return cloudsponge.launch('yahoo');"><img alt="Yahoo" height="28" src="/images/icons/yahoo.png" title="Yahoo" width="28"></a>
              <a class="deep-link delayed" title="Aol" onclick="return cloudsponge.launch('aol');"><img alt="Aol" height="28" src="/images/icons/aol.png" title="Aol" width="28"></a>
              <a href="#" class="deep-link" title="Plaxo" onclick="return cloudsponge.launch('plaxo');"><img alt="Plaxo" height="28" src="/images/icons/plaxo.png" title="Plaxo" width="28"></a>
              <a class="deep-link desktop-only" stye="display: none;"  title="Out look" onclick="return cloudsponge.launch('outlook');"><img alt="Outlook" height="28" src="/images/icons/outlook-desktop.png" title="out look" width="28"></a>
              <a class="deep-link desktop-only" stye="display: none;"  title="iCloud" onclick="return cloudsponge.launch('icloud');"><img alt="iCloud" height="28" src="/images/icons/icloud.png" title="iCloud" width="28"></a>
              <a class="deep-link desktop-only" stye="display: none;"  title="Mail.com" onclick="return cloudsponge.launch('mail');"><img alt="Mail.com" height="28" src="/images/icons/mail.png" title="Mail.com" width="28"></a>
              <a class="deep-link desktop-only" stye="display: none;"  title="windowslive" onclick="return cloudsponge.launch('windowslive');"><img alt="windowslive" height="28" src="/images/icons/outlook.com.png" title="windowslive" width="28"></a>
              <a class="deep-link desktop-only" stye="display: none;"  title="Generic CSV" onclick="return cloudsponge.launch('csv');"><img alt="Generic CSV" height="28" src="/images/icons/email.png" title="Generic CSV" width="28"></a>
               <a class="deep-link desktop-only" stye="display: none;"  title="Address Book" onclick="return cloudsponge.launch('addressbook');"><img alt="Address Book" height="28" src="/images/icons/apple-desktop.png" title="Address Book" width="28"></a>
               <a class="deep-link desktop-only" stye="display: none;"  title="Mail.ru" onclick="return cloudsponge.launch('mail.ru');"><img alt="Mail.ru" height="28" src="/images/icons/mail_ru.png" title="Mail.ru" width="28"></a>
               <a class="deep-link desktop-only" stye="display: none;"  title="UOL" onclick="return cloudsponge.launch('uol');"><img alt="UOL" height="28" src="/images/icons/uol.png" title="UOL" width="28"></a>
               <a class="deep-link desktop-only" stye="display: none;"  title="BOL" onclick="return cloudsponge.launch('bol');"><img alt="BOL" height="28" src="/images/icons/bol.png" title="BOL" width="28"></a>
               <a class="deep-link desktop-only" stye="display: none;"  title="Terra" onclick="return cloudsponge.launch('terra');"><img alt="Terra" height="28" src="/images/icons/terra.png" title="Terra" width="28"></a>
               <a class="deep-link desktop-only" stye="display: none;"  title="Rediff" onclick="return cloudsponge.launch('rediff');"><img alt="Rediff" height="28" src="/images/icons/rediff.png" title="Rediff" width="28"></a>
               <a class="deep-link desktop-only" stye="display: none;"  title="126.com" onclick="return cloudsponge.launch('mail126');"><img alt="126.com" height="28" src="/images/icons/126com.png" title="126.com" width="28"></a>
               <a class="deep-link desktop-only" stye="display: none;"  title="163.com" onclick="return cloudsponge.launch('mail163');"><img alt="163.com" height="28" src="/images/icons/163com.png" title="163.com" width="28"></a>
               <a class="deep-link desktop-only" stye="display: none;"  title="Yeah.net" onclick="return cloudsponge.launch('mail_yeah_net');"><img alt="Yeah.net" height="28" src="/images/icons/yeahnet.png" title="Yeah.net" width="28"></a>
               <a class="deep-link desktop-only" stye="display: none;"  title="GMX" onclick="return cloudsponge.launch('gmx');"><img alt="GMX" height="28" src="/images/icons/gmx.png" title="GMX" width="28"></a>
              </div>
              <div class="mtop10">
               <a class="deep-link desktop-only" stye="display: none;"  title="QIP.ru" onclick="return cloudsponge.launch('qip_ru');"><img alt="QIP.ru" height="28" src="/images/icons/qip_ru.png" title="QIP.ru" width="28"></a>
               <a class="deep-link desktop-only" stye="display: none;"  title="Sapo.pt" onclick="return cloudsponge.launch('sapo');"><img alt="Sapo.pt" height="28" src="/images/icons/sapo.png" title="Sapo.pt" width="28"></a>
               <a class="deep-link desktop-only" stye="display: none;"  title="Yandex.ru" onclick="return cloudsponge.launch('yandex_ru');"><img alt="Yandex.ru" height="28" src="/images/icons/yandex.png" title="Yandex.ru" width="28"></a>
               <a class="deep-link desktop-only" stye="display: none;"  title="Office365" onclick="return cloudsponge.launch('office365');"><img alt="Office365" height="28" src="/images/icons/office365.png" title="Office365" width="28"></a>-->
<!--               </div>-->
          </div>

</div>
<div class="contact-list">
    <form method="get" name="connections" action="{{url('searchcontacts')}}">
    Contacts:</br>
    <textarea  id="contact_list" name="contact_list" placeholder="We will populate this field with the contacts that you select from your address book." data-gramm="" data-txt_gramm_id="0090d17a-5e93-0ecb-f73f-7b23bf0f5452" class="form-control impot-contact-text" readonly="true"></textarea>
          <input type="hidden" name="_token" value="{{csrf_token()}}">
          <button type="submit" style="margin-top: 10px;" name="submit"  value="submit" class="btn btn-primary" id="btn_submit">Import</button>
    </form>
</div>

<!-- Any link with a class="cs_import" attribute will launch the widget -->
            </div></div></div></div>
            <div class="clearfix"></div>
            </div></div>
            
         </div>
    
    
</section>@endsection

<!-- Cloudsponge Js Script Starts -->
<script type='text/javascript'>
(function(u){
  var d=document,s='script',a=d.createElement(s),m=d.getElementsByTagName(s)[0];
  a.async=1;a.src=u;m.parentNode.insertBefore(a,m);
})('//api.cloudsponge.com/widget/d71c8348d1de0600d116f18c953cd23aa410d8ba.js');
window.csPageOptions = {
  textarea_id:'contact_list',  
  skipSourceMenu:true,   
  afterInit:function() {
    var i, links = document.getElementsByClassName('delayed');
    for (i = 0; i < links.length; i++) {
      // make the links that launch a popup clickable by setting the href property
      links[i].href = "#";
    }
    // if this is not a mobile browser, we can show and enable the desktop-only links
    if (!cloudsponge.mobile) {
      links = document.getElementsByClassName('desktop-only');
      for (i = 0; i < links.length; i++) {
        // show it
        link[i].style.display = "";
        // make it clickable
        link[i].href = "#";
      }
    }
  }
};
</script>
<!-- Cloudsponge Js Script Ends -->
<script type="text/javascript">
window.csPageOptions = {  
  textarea_id:'contact_list',
  include:['email']
};
//var onImportComplete = onABCommComplete;
(function(u){ 
  var d=document,s='script',a=d.createElement(s),m=d.getElementsByTagName(s)[0];
  a.async=1;a.src=u;m.parentNode.insertBefore(a,m);
})('//api.cloudsponge.com/address_books.js');</script>

