{% extends 'App::layout_search.html.twig' %}

{% block title %}Recherchez un prof{% endblock %}

{% block stylesheets %}
  <link href="/assets/selectize.js-master/dist/css/selectize.css" rel="stylesheet">
  <style>

    .h1 {
        font-size: 20px;
        color:white;
        font-weight: bold;
    }

    .h2 {
        font-size: 16px;
        color:#718093;
        font-weight: bold;
    }


  </style>
{% endblock %}

{% block fos_user_content %}



    <div class="container-fluid simple-background-skill-search">
        <div class="container">
            <div class="row">
                <div class="col-md-12 p-15" style="padding-top:15px;padding-bottom:0px;">
                    {{ render(controller('App:Search:search', {'form': formSearch})) }}
                </div>
            </div>
        </div>
    </div>



        <div class="container xs-no-p-i">
            <div class="row xs-no-m-i">
                <div class="col-xs-12 xs-no-p-i">


                

                  <div class="m-10">
                    <h2 class="h2 text-center"><b style="color:#2f3542;">{{ items.getTotalItemCount }}</b> résultats pour des cours particuliers {% if category.name|first|lower in ['a','e','i','o','u','h'] %}d'{% else %}de {% endif %}<b style="color:#2f3542;">{{ category.name }}</b> {% if cp %}- <b style="color:#2f3542;">{{ departement.departementNom }} ({{ cp }})</b>{% elseif departement %}- <b style="color:#2f3542;">{{ departement.departementNom }} ({{ departement.departementCode }})</b>{% endif %}{% if level %} - <b style="color:{{ colorLevels[level] }};">{{ levels[level] }}</b> {% endif %} {% if location %}
                      - {% if location == 'webcam' %}
                          <span  style="background-color:#2980b9;" class="badge badge-light">Par webcam</span>
                        {% elseif location == 'outPlace' %}
                          <span  style="background-color:#f39c12;" class="badge badge-light">À mon domicile</span>
                        {% elseif location == 'inPlace' %}
                          <span  style="background-color:#9b59b6;" class="badge badge-light">Autres</span>
                        {% endif %}
                    {% endif %}</h2>
                  </div>

                  {% if premia|length > 0 %}
                    <div class="m-10">

                      <ul class="flex space-x-6">

                            {% for key, premium in premia|reverse %}
                                {% if premium.profile.user.id != 1 %}

                                <li class="flex-col items-center space-y-1">
                                  <div class="bg-gradient-to-tr">

                                    <a href="{{ path('app_profileCategory_show', { 'profile':  premium.profile.id, 'slug':  'professeur-'~ premium.profile.department ~'-'~  premium.profile.firstname| myslugify ~'-'~  premium.profile.lastname|first| myslugify, 'skill': category.slug, 'id':  premium.id, 'from': 'premium' }) }}">
                                      {% if premium.profile.avatar and premium.profile.avatar.path %}
                                        <noscript>
                                          <img class="img-circle-premium pull-center avatar-fix-premium-slide" src="/uploads/avatar/{{ premium.profile.avatar.path }}" data-src="/uploads/avatar/{{ premium.profile.avatar.path }}" alt="{{ premium.profile.firstname }} {{ premium.profile.lastname }}" style="width:80px;"/>
                                        </noscript>                                       
                                        <img class="img-circle-premium pull-center avatar-fix-premium-slide lazyload" data-src="/uploads/avatar/{{ premium.profile.avatar.path }}" alt="{{ premium.profile.firstname }} {{ premium.profile.lastname }}" style="width:80px;"/>
                                      {% else %}
                                        <img  class="img-circle-premium avatar-fix-premium-slide" alt="avatar" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTrxwZhuShcQieycZ7U7thuj9cmUESbEffhVLc_EsxRJCLPDr7NUA" style="width:80px;"/>
                                      {% endif %}
                                      <span class="notify-badge"><i class="fa fa-circle" aria-hidden="true"></i></span>
                                    </a>
                                  </div>
                                </li>
                                {% endif %}
                            {% endfor %}


                      </ul>

                    </div>
                  {% endif %}

                  {% for key, premium in premia %}
                      {% if premium.profile.user.id != 1 %}
                        {% include 'App:Category:ad.html.twig' with {'item': premium} %}
                      {% endif %}
                  {% endfor %}

                  {% if location == 'webcam' %}
                    <!-- Discord -->
                    {##
                    <div class="panel panel-discord" style="margin-left:10px;margin-right:10px;">

                        <div class="panel-body">
                    
                            <div class="row r-sm-table">
                              <div class="col-md-2 col-sm-cell text-center">
                                <span class="label label-primary b-rad-100 label-line inline-block"><b>{{ members.count }}</b> membres</span>
                                <img width="150" src="images/Discord-Logo+Wordmark-Color.svg" alt="Discord">
                                <span class="label label-discord b-rad-100 label-line inline-block">Rueduprof</span>



                              </div>
                              <div class="col-md-10 col-sm-cell text-center">
                                <h5>Rejoignez la communauté <b>RueduProf</b> sur Discord!</h5>
        
                                <p><i class="fa fa-circle" aria-hidden="true" style="color:#44bc8c;"></i> <span style="color:#2c2f33;">{{ members.countTutor }}</span> <span style="color:#99aab5;">profs disponible en ligne</span>  <a class="btn btn-discord" href="https://discord.gg/MyWkZwsZty"  target="_blank">Recevez une invitation</a></p>
                               
                              </div>
                            </div>
                          </div>
                      </div>
                      #}
                  {% endif %}

                  {% for key, item in items %}    

          
            <!-- START: Ticket item -->
            <div class="panel panel-default" style="margin-left:10px;margin-right:10px;">
                <div class="panel-body p-20">
                    <div class="row r-sm-table bg-white">
                        <div class="col-md-2 col-sm-cell">
                         
                                
                           <div>
                            {% if item.profile.user.lastLogin %}
                            <span class="label label-primary b-rad-100 label-line inline-block"><time class="timeago" datetime="{{ item.profile.user.lastLogin|date }}"></time></span>
                            {% else %}
                            <span class="label label-primary b-rad-100 label-line inline-block"><time class="timeago" datetime="{{ item.profile.user.created|date }}"></time></span>
                            {% endif %}
                          </div>
                          <br />


                            <div>
                                <a href="{{ path('app_profile_user_show', { 'id': item.profile.id, 'slug':  'professeur-'~item.profile.department ~'-'~ item.profile.firstname| myslugify ~'-'~ item.profile.lastname|first| myslugify }) }}">

                                  <table>
                                  <tr>

                                   {% if item.profile.avatar and item.profile.avatar.path %}
                                      <td><img  class="img-circle pull-left avatar-fix" alt="{{ item.profile.firstname }} {{ item.profile.lastname }}"src="/uploads/avatar/{{ item.profile.avatar.path }}"/></td>
                                      {% else %}
                                      <td><img  class="img-circle pull-left avatar-fix" alt="avatar" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTrxwZhuShcQieycZ7U7thuj9cmUESbEffhVLc_EsxRJCLPDr7NUA"/></td>
                                    {% endif %}

                                   


                                        <td><div class="font-normal">{% if item.profile and item.profile.firstname and item.profile.lastname  and item.profile.user.device != 'ANDROID' %}
                                <b style="margin-top:5px;">{{ item.profile.firstname }} {{ item.profile.lastname|first }}.</b>
                              {% else %} 
                                <b style="margin-top:5px;">{{ item.profile.lastname }} {{ item.profile.firstname|first }}.</b>
                              {% endif %}</div></td>


                                   

                                  </tr>
                                </table>


                                </a>
                            </div>
                            <br />

                            {% if item.webcam %}<div style="font-size:12px;font-weight:700;color:#2980b9;"><i class="fa fa-video-camera"></i> Webcam</div>{% endif %}
                            {% if item.inPlace %}<div style="font-size:11px;font-weight:700;color:#8e44ad;"><i class="fa fa-angle-double-left"></i>  Je peux recevoir mes élèves</div>{% endif %}
                            {% if item.outPlace %}<div style="font-size:11px;font-weight:700;color:#e67e22;"><i class="fa fa-angle-double-right"></i>  Je peux me déplacer</div>{% endif %}

                        </div>
                        <div class="col-md-7 col-sm-cell">
                            <h3 class="h2_title"><a href="{{ path('app_profileCategory_show', { 'profile': item.profile.id, 'slug':  'professeur-'~item.profile.department ~'-'~ item.profile.firstname| myslugify ~'-'~ item.profile.lastname|first| myslugify, 'skill': category.slug, 'id': item.id }) }}" class="font-normal" style="font-size:16px;font-weight:500;">
                              Cours particuliers {% if category.name|first|lower in ['a','e','i','o','u','h'] %}d'{% else %}de {% endif %}<strong>{{ category.name }}</strong>
                              {% if item.profile and item.profile.city  %} à <strong>{{ item.profile.city }} {% if item.profile and item.profile.department  %}<span>({{ item.profile.department }})</span>{% endif %} </strong>{% endif %}
                                {% if item.profile and item.profile.firstname and item.profile.lastname  and item.profile.user.device != 'ANDROID' %}
                                avec <b>{{ item.profile.firstname }} {{ item.profile.lastname|first }}.</b>
                              {% else %} 
                              avec <b>{{ item.profile.lastname }} {{ item.profile.firstname|first }}.</b>
                              {% endif %} 
                             

                                </a></h3>
                            <p>
                              {% if item.content %}
                                {{ item.content|length > 350 ? item.content|slice(0, 350) ~ '...' : item.content   }}
                              {% elseif item.profile.content %}
                                {{ item.profile.content|length > 350 ? item.profile.content|slice(0, 350) ~ '...' : item.profile.content   }}
                              {% endif %}
                            </p>



                            <div class="m-b-10">
                                {% if item.primaire %}<span class="label label-success">Primaire</span>{% endif %}
                                {% if item.college %}<span class="label label-info">Collége</span>{% endif %}
                                {% if item.lycee %}<span class="label label-primary">Lycée</span>{% endif %}
                                {% if item.superieur %}<span class="label label-danger">Supérieur</span>{% endif %}
                            </div>
                                
                       

                            <ul class="list-unstyled tag-list inline-block no-m">

                              {% for itemCategory in item.profile.categories  %}
                                
                                    <li><a href="{{ path('app_profileCategory_show', { 'profile': item.profile.id, 'slug':  'professeur-'~item.profile.department ~'-'~ item.profile.firstname| myslugify ~'-'~ item.profile.lastname|first| myslugify, 'skill': category.slug, 'id': itemCategory.id }) }}">#{{ itemCategory.category.name }}</a></li>
                                
                              {% endfor %}
                                
                            </ul>
                        </div>
                        <div class="col-sm-3 col-sm-cell  text-center">
                    
                            {% if item.pricePerHour %}
                            <div><a  href="{{ path('app_profileCategory_show', { 'profile': item.profile.id, 'slug':  'professeur-'~item.profile.department ~'-'~ item.profile.firstname| myslugify ~'-'~ item.profile.lastname|first| myslugify, 'skill': category.slug, 'id': item.id }) }}" class="avatar m-r-3 inline-block" style="font-weight:900;font-size:28px;">
                            {{ item.pricePerHour }}<sup>€ / h</sup>
                            </a></div>
                            {% endif %}

                            {% if item.firstHour %}
                              <div style="font-size:12px;font-weight:700;color:#27ae60;">
                                <i class="fa fa-money"></i>  1ère heure gratuite
                              </div>
                            {% endif %}
                                     
                            <div><a style="margin-top:10px;" class="btn btn-sm btn-primary btn-call-to-action" href="{{ path('search_booking', { 'id': item.id }) }}" ><i class="fa fa-comments-o"></i> Contacter ce professeur gratuitement</a></div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- End: Ticket item -->


            {% endfor %} 


                <div class="row m-10 text-center navigation">

                    {{ knp_pagination_render(items) }}

                </div>
           
        </div>

      </div>

    </div>


{% endblock fos_user_content %}
{% block javascripts %}

    <script type="text/javascript">

      jQuery(document).ready(function() {
        jQuery(".timeago").timeago();
      });

    </script>
    <script src="/assets/selectize.js-master/dist/js/standalone/selectize.min.js"></script>
    <script>
      jQuery('.chosen-select').selectize();
    </script>
    <script>
    // MAP
    var map;


    // AUTOCOMPLETE
    var placeSearch, autocomplete;
    var componentForm = {
      //street_number: 'short_name',
      //route: 'long_name',
      locality: 'long_name',
      administrative_area_level_1: 'long_name',
      administrative_area_level_2: 'long_name',
      country: 'long_name',
      postal_code: 'long_name'
    };


    var myForm = {
      locality: 'profile_city',
      administrative_area_level_1: 'profile_stateSecond',
      administrative_area_level_2: 'profile_state',
      country: 'profile_country',
      postal_code: 'profile_department'  
    };



    function initAutocomplete()
    {
      

      autocomplete = new google.maps.places.Autocomplete(
        (document.getElementById('form_city')), {types: ['geocode'], componentRestrictions: {country: "fr"}}

        );
      autocomplete.addListener('place_changed', fillInAddress);



    }

    function fillInAddress() 
    {
      var place = autocomplete.getPlace();



      var lat = place.geometry.location.lat();
      var lng = place.geometry.location.lng();

      document.getElementById("form_latitude").value = lat;
      document.getElementById("form_longitude").value = lng;


      document.getElementById("form_department").value = '';


      for (var i = 0; i < place.address_components.length; i++) 
      {
        var addressType = place.address_components[i].types[0];

        if (componentForm[addressType]) 
        {
          if (addressType == 'postal_code')
          {
            var val = place.address_components[i][componentForm[addressType]];
            document.getElementById("form_department").value = val;
          }
          if (place.address_components[i][componentForm[addressType]] == 'Paris')
          {
            var val = place.address_components[i][componentForm[addressType]];
            document.getElementById("form_department").value = val;            
          }

        }


      }

      if (document.getElementById("form_department").value === undefined || document.getElementById("form_department").value == '')
      {
          for (var i = 0; i < place.address_components.length; i++) 
          {
            var addressType = place.address_components[i].types[0];
            if (componentForm[addressType]) 
            {
              if (addressType == 'administrative_area_level_2')
              {
                var strComponent = place.address_components[i][componentForm[addressType]];
                document.getElementById("form_department").value = strComponent;

              }

            }
          }
      }



    }
    </script> 

  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDgIqxWbmTk2jHfOaNYEXC73GsWjal1Osw&signed_in=true&libraries=places&callback=initAutocomplete"
        ></script> 
{% endblock %}