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

{% block body %}
  <div class="sidebar-layout-obfuscator"></div>
      <!-- Main section-->
      <main class="main-container">

        <section>
          <div class="container-overlap bg-blue-500">
            <div class="media m0 pv">

                {% if profile.avatar %}
                  <div class="media-left"><a href="#"><img src="https://www.rueduprof.com/uploads/avatar/uploads/avatar/{{ profile.avatar.path }}" alt="User" class="media-object img-circle thumb64"></a></div>
                {% endif %}

              <div class="media-body media-middle">
                <h4 class="media-heading">{{ profile.firstname }} {{ profile.lastname }}</h4><span class="text-muted">{{ profile.categories|length }} Skills - {% if profile.user.email %}{{ profile.user.email }}{% endif %} - {{ profile.user.username }}</span>
              </div>
            </div>
          </div>
          <div class="container-fluid">
            <div class="row">
              <!-- Left column-->
              <div class="col-md-7 col-lg-8">
                <form editable-form="" name="user.profileForm" class="card">
                  <h5 class="card-heading pb0">
                    <!-- START dropdown-->
                    <div class="pull-right dropdown">
                      <button type="button" data-toggle="dropdown" class="btn btn-default btn-flat btn-flat-icon"><em class="ion-android-more-vertical"></em></button>
                      <ul role="menu" class="dropdown-menu md-dropdown-menu dropdown-menu-right">
                        <li><a href="#">Action 1</a></li>
                        <li><a href="#">Action 2</a></li>
                      </ul>
                    </div>
                    <!-- END dropdown-->About
                  </h5>
                  <div class="card-body">
                    <p data-type="textarea" class="is-editable text-inherit">{{ profile.content|nl2br }}</p>
                  </div>
                  <div class="card-divider"></div>
                  <div class="card-offset">
                    <div class="card-offset-item text-right">
                      <button id="edit-enable" type="button" class="btn-raised btn btn-warning btn-circle btn-lg"><em class="ion-edit"></em></button>
                      <button id="edit-disable" type="submit" class="btn-raised btn btn-success btn-circle btn-lg hidden"><em class="ion-checkmark-round"></em></button>
                    </div>
                  </div>
                  <h5 class="card-heading pb0">Contact Information</h5>
                  <div class="card-body">
                    <table class="table table-striped">
                      <tbody>
                        <tr>
                          <td><em class="ion-document-text icon-fw mr"></em>Je suis : </td>
                          {% if profile.role == 'ROLE_WEBMASTER' %}
                            <td>Teacher</td>
                          {% else %}
                            <td>Student</td>
                          {% endif %}
                        </tr>
                        <tr>
                          <td><em class="ion-android-home icon-fw mr"></em>Civility</td>
                          <td><span class="is-editable text-inherit">{{ profile.civility }}</span></td>
                        </tr>
                        <tr>
                          <td><em class="ion-android-home icon-fw mr"></em>Birthday</td>
                          <td><span class="is-editable text-inherit">{{ profile.birthday|date("d/m/Y H:i:s") }}</span></td>
                        </tr>
                        <tr>
                          <td><em class="ion-egg icon-fw mr"></em>Username</td>
                          <td><span data-type="date" data-mode="popup" class="is-editable text-inherit">{{ profile.user.username }}</span></td>
                        </tr>
                        <tr>
                          <td><em class="ion-egg icon-fw mr"></em>Last Login</td>
                          <td><span data-type="date" data-mode="popup" class="is-editable text-inherit">{{ profile.user.lastLogin|date("d/m/Y H:i:s") }}</span></td>
                        </tr>
                        <tr>
                          <td><em class="ion-ios-body icon-fw mr"></em>Member since</td>
                          <td><span data-type="date" data-mode="popup" class="is-editable text-inherit">{{ profile.user.created|date("d/m/Y H:i:s") }}</span></td>
                        </tr>
                        <tr>
                          <td><em class="ion-android-home icon-fw mr"></em>CESU</td>
                          <td><span class="is-editable text-inherit">{{ profile.cesu }}</span></td>
                        </tr>
                        <tr>
                          <td><em class="ion-android-home icon-fw mr"></em>Address</td>
                          <td><span class="is-editable text-inherit">{{ profile.address }}</span></td>
                        </tr>
                        <tr>
                          <td><em class="ion-android-home icon-fw mr"></em>City</td>
                          <td><span class="is-editable text-inherit">{{ profile.city }}</span></td>
                        </tr>

                        <tr>
                          <td><em class="ion-android-home icon-fw mr"></em>Department</td>
                          <td><span class="is-editable text-inherit">{{ profile.department }}</span></td>
                        </tr>
                        <tr>
                          <td><em class="ion-android-home icon-fw mr"></em>Area</td>
                          <td><span class="is-editable text-inherit">{{ profile.stateSecond }}</span></td>
                        </tr>
                        <tr>
                          <td><em class="ion-android-home icon-fw mr"></em>State</td>
                          <td><span class="is-editable text-inherit">{{ profile.state }}</span></td>
                        </tr>

                        <tr>
                          <td><em class="ion-android-home icon-fw mr"></em>Country</td>
                          <td><span class="is-editable text-inherit">{{ profile.country }}</span></td>
                        </tr>

                        <tr>
                          <td><em class="ion-email icon-fw mr"></em>Email</td>
                          <td><span class="is-editable text-inherit"><a href="#">{{ profile.user.email }}</a></span></td>
                        </tr>
                        <tr>
                          <td><em class="ion-ios-telephone icon-fw mr"></em>Contact phone</td>
                          <td><span class="is-editable text-inherit">{{ profile.mobile }}</span></td>
                        </tr>
                        <tr>
                          <td><em class="ion-ios-telephone icon-fw mr"></em>Location</td>
                          <td><span class="is-editable text-inherit">Lat: <stong>{{ profile.lat }}</strong> - Lng: <strong>{{ profile.lng }}</strong></span></td>
                        </tr>
                      </tbody>
                    </table>
                  </div>

                <h5 class="card-heading pb0">Mobile Information</h5>
                  <div class="card-body">
                    <table class="table table-striped">
                      <tbody>

                        <tr>
                          <td><em class="ion-document-text icon-fw mr"></em>Device</td>
                          <td>{{ profile.user.device }}</td>
                        </tr>

                        <tr>
                          <td><em class="ion-egg icon-fw mr"></em>Token</td>
                          <td>{{ profile.user.IosDeviceToken }}</td>
                        </tr>

                      </tbody>
                    </table>
                  </div>


                  <div class="card-divider"></div>
                  <h5 class="card-heading pb0">{{ profile.categories|length }} Skills</h5>
                  <div class="card-body">
                   

                      {% for category in profile.categories  %}

                       

                        

                            <div class="row">
                              <div class="col-md-2">
                                <img src="{{ category.category.parent.iosIcon }}" class="img-responsive"/>
                              </div>
                              <div class="col-md-4">

                                <h5><a href="#">{{ category.category.name }}</a></h5>
                                <p>{{ category.category.parent.name }}</p>

                              </div>
                              <div class="col-md-3">

                                {% if category.pricePerHour %}
                                  <strong>{{ category.pricePerHour }}</strong><sup>€/heure</sup>
                                {% endif %}

                              </div>
                              <div class="col-md-3">
                                <div class="pull-right">
                                    {% if category.status %}
                                      <div class="pt-lg"><em tooltip="Active" class="icon-2x ion-checkmark-circled text-success"></em></div>
                                    {% else %}
                                      <div class="pt-lg"><em tooltip="Pending" class="icon-2x ion-minus-circled text-default"></em></div>
                                    {% endif %}

                                </div>
                              </div>

                            </div>

                      {% endfor %}


           
                  </div>
                </form>
              </div>
              <!-- Right column-->
              <div class="col-md-5 col-lg-4">
                <div class="card">
                  <h5 class="card-heading">
                    <!-- START dropdown-->
                    <div class="pull-right dropdown">
                      <button type="button" data-toggle="dropdown" class="btn btn-default btn-flat btn-flat-icon"><em class="ion-android-more-vertical"></em></button>
                      <ul role="menu" class="dropdown-menu md-dropdown-menu dropdown-menu-right">
                        <li><a href="#">Action 1</a></li>
                        <li><a href="#">Action 2</a></li>
                      </ul>
                    </div>
                    <!-- END dropdown-->Coordonnées GPS
                  </h5>
                  <div class="mda-list">

                    <div class="mda-list-item">
                      <div class="mda-list-item-text mda-2-line">
                        <h3><a href="#">Latitude</a></h3>
                        <div class="text-muted text-ellipsis">{{ profile.lat }}</div>
                      </div>
                    </div>

                    <div class="mda-list-item">
                      <div class="mda-list-item-text mda-2-line">
                        <h3><a href="#">Longitude</a></h3>
                        <div class="text-muted text-ellipsis">{{ profile.lng }}</div>
                      </div>
                    </div>

                  </div>

                    <div class="card card-default">
                      <div class="card-heading">Basic</div>
                      <div class="card-body">
                        <div id="map" class="gmap"></div>
                      </div>
                    </div>


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


        <!-- Page footer-->
        <footer><span>2016 - Centric app.</span></footer>
      </main>
    </div>

{% endblock body %}
{% block javascripts %}
<script src='//maps.googleapis.com/maps/api/js'></script>   
<script type="text/javascript">

(function() {
    'use strict';

    var myLatLng = new google.maps.LatLng("{{ profile.lat }}","{{ profile.lng }}");
    var map = new google.maps.Map(document.getElementById("map"),
    {
        zoom: 15,
        center: myLatLng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var marker = new google.maps.Marker(
    {
        position: myLatLng,
        map: map,
        title: '{{ profile.firstname }} {{ profile.lastname }}'
    });



})();

</script>
{% endblock %}