{% extends '::base_admin.html.twig' %}

{% set _route = app.request.attributes.get('_route') %}
{% block title %}User profile{% endblock %}

{% block body %}
 <div class="row-fluid" id="page-header">
    <div class="span9"><h1>{{ block('title') }}</h1></div>
    <div class="span3">
    {% if id is defined  and (entity.deletable is not defined or entity.deletable) %}
        <a class="btn btn-danger btn-default pull-right" href="{{ path('admin_user_delete', {'id':id}) }}" data-confirm="{% trans %}Are you sure you really want to delete this entity?{% endtrans %}" data-original-title="{% trans %}Delete this entity{% endtrans %}" onclick="return confirmDelete(this);">
            <i class="fa fa-eraser"></i>
            {% trans %}Delete{% endtrans %}
        </a>
    {% endif %}
    </div>
</div>
{{ breadcrumb() }}
<div id="manager">
    <div class="row-fluid profile">
        <!--BEGIN TABS-->
        <div class="tabbable tabbable-custom tabbable-full-width">
             <ul class="nav nav-tabs">
                <li class="active"><a class="tab-section" data-toggle="tab" href="#tab_overview">{% trans %}Overview{% endtrans %}</a></li>
                <li><a class="tab-section" data-toggle="tab" href="#tab_update">{% trans %}Update{% endtrans %}</a></li>
             </ul>
            <div class="tab-content">
                <div id="tab_overview" class="tab-pane row-fluid active">
                   <ul class="unstyled profile-nav span3">
                      <li>
                        <div style="position:relative;z-index:1;max-width:400px;">
                            <img alt="" id="pic" src="{{ entity|avatar() }}">
                            {{ imageCropping(entity) }}
                        </div>
                      </li>
                        {% if hasAccess('user.admin_access') and app.user.isSuperAdmin == true %}
                        <li class="text-center">
                            <a href="{{ path('admin_user_adminacess', {id: entity.id} )}}" class="btn">Admin access</a>
                        </li>
                        {% endif %}
                   </ul>
                   <div class="span9">
                      <div class="row-fluid">
                         <div class="span8 profile-info">
                            <h1>{{ entity.firstname }} {{ entity.lastname }} <a href="{{ path('admin_user_vcard',{'id':id}) }}" ><i class="fa fa-share-square-o"></i></a></h1>
                            <ul class="unstyled inline">
                               {% if entity.isSuperAdmin %}<li><i class="fa fa-shield"></i> {% trans %}Admin{% endtrans %}</li>{% endif %}
                               {% if entity.country is defined %}<li><i class="fa fa-map-marker"></i> {{ entity.country }}</li>{% endif %}
                               <li><i class="fa fa-calendar"></i> {{ entity.birthdate|localizeddate('medium', 'none') }}</li>

                               <li></li>
                            </ul>
                         </div>
                         <!--end span8-->
                         <div class="span4">
                            <div class="portlet sale-summary">
                               <div class="portlet-title">
                                  <div class="caption">{% trans %}Profile info{% endtrans %}</div>
                                  <div class="tools">
                                     <a href="javascript:;" class="reload"></a>
                                  </div>
                               </div>
                               <ul class="unstyled">
                                  <li>
                                     <span class="sale-info"><i class="fa fa-envelope"></i> </span>
                                     <span class="sale-num"><a href="mailto:{{ entity.email }}">{{ entity.email }}</a></span>
                                  </li>
                                  <li>
                                     <span class="sale-info"><i class="fa fa-phone"></i> </span>
                                     <span class="sale-num">{{ entity.phone }}</span>
                                  </li>
                                  <li>
                                     <span class="sale-info"><i class="fa fa-calendar"></i> {% trans %}Created At{% endtrans %} </span>
                                     <span class="sale-num">{{ entity.createdAt|localizeddate('medium', 'none') }}</span>
                                  </li>
                                  <li>
                                     <span class="sale-info"><i class="fa fa-calendar"></i> {% trans %}Updated At{% endtrans %} </span>
                                     <span class="sale-num">{{ entity.updatedAt|localizeddate('medium', 'none') }}</span>
                                  </li>
                               </ul>
                            </div>
                         </div>
                         <!--end span4-->
                      </div>
                      <!--end row-fluid-->
                      <div class="tabbable tabbable-custom tabbable-custom-profile">
                         <ul class="nav nav-tabs">
                            <li class="active"><a data-toggle="tab" href="#tab_addresses">{% trans %}Addresses{% endtrans %}</a></li>
                            <li><a data-toggle="tab" href="#tab_emails">{% trans %}E-mails{% endtrans %}</a></li>
                         </ul>
                         <div class="tab-content">
                            <div id="tab_addresses" class="tab-pane active">
                              <div class="row-fluid">
                                <div class="span8 profile-info">
                                    <script src="//maps.googleapis.com/maps/api/js?key=AIzaSyC_WxZOsjbVQPhCOBskBFVe9QfAHp3w1C0&sensor=true"></script>
                                    <script src="//maps.googleapis.com/maps/api/js?key=AIzaSyC_WxZOsjbVQPhCOBskBFVe9QfAHp3w1C0&sensor=true"></script>
                                    <script>
                                        function markAddress(map) {
                                            geocoder.geocode( { 'address': "{{ entity.address }} {{ entity.zip }} {{ entity.city }} {{ entity.country }}"}, function(results, status) {
                                                if (status == google.maps.GeocoderStatus.OK) {
                                                  map.setCenter(results[0].geometry.location);
                                                  var marker = new google.maps.Marker({
                                                      'map': map,
                                                      'position': results[0].geometry.location,
                                                      'icon': '//chart.apis.google.com/chart?chst=d_map_pin_letter&chld=A|FF0000|000000'
                                                  });
                                                } else {
                                                    geocoder.geocode( { 'address': "{{ entity.zip }} {{ entity.city }} {{ entity.country }}"}, function(results, status) {
                                                        if (status == google.maps.GeocoderStatus.OK) {
                                                          map.setCenter(results[0].geometry.location);
                                                          var marker = new google.maps.Marker({
                                                              'map': map,
                                                              'position': results[0].geometry.location,
                                                              'icon': '//chart.apis.google.com/chart?chst=d_map_pin_letter&chld=A|FF0000|000000'
                                                          });
                                                        }
                                                    });

                                                }
                                            });
                                        }
                                      </script>
                                    <script type="text/javascript">
                                      function initialize() {
                                        geocoder = new google.maps.Geocoder();
                                        var mapOptions = {
                                          'center' : new google.maps.LatLng(46.80, 1.70),
                                          'zoom' : 6,
                                          'mapTypeId' : google.maps.MapTypeId.ROADMAP
                                        };
                                        var map = new google.maps.Map(document.getElementById("map-canvas"),
                                            mapOptions);
                                            markAddress(map);
                                      }
                                      google.maps.event.addDomListener(window, 'load', initialize);
                                    </script>
                                    <div id="map-canvas" style="height : 400px;width : 100%;"></div>

                                 </div>
                                 <div class="span4 profile-info">
                                    <ul class="unstyled">
                                        <strong><i class="fa fa-envelope-alt"></i> A - {{ entity.firstname }} {{ entity.lastname }}</strong>
                                        <li>{{ entity.address }}</li>
                                        <li>{{ entity.zip }} {{ entity.city }}</li>
                                        {% if entity.phone is not null %}<li><i class="fa fa-phone"></i> {{ entity.phone }}</li>{% endif %}
                                        {% if entity.cellphone is not null %}<li><i class="fa fa-phone"></i> {{ entity.cellphone }}</li>{% endif %}
                                    </ul>
                                 </div>
                              </div>
                            </div>
                            {% if emails is defined %}
                            <!--tab-emails-->
                            <div id="tab_emails" class="tab-pane">
                               <div style="display: block;" class="portlet-body">
                                  <table class="table table-striped table-bordered table-advance table-hover">
                                     <thead>
                                        <tr>
                                           <th class="hidden-phone"><i class="fa fa-calendar"></i> {% trans %}Date{% endtrans %}</th>
                                           <th><i class="fa fa-bookmark"></i> {% trans %}Name{% endtrans %}</th>
                                           <th><i class="fa fa-envelope"></i> {% trans %}Title{% endtrans %}</th>
                                           <th>Body</th>
                                     <tbody>
                                    {% for email in emails %}
                                        <tr>
                                           <td class="hidden-phone">{{ email.createdAt|localizeddate('medium', 'none') }}</td>
                                           <td>{{ email.name }}</td>
                                           <td><a href="{{ path('admin_user_mailer_detail', {'id': email.id}) }}">{{ email.title }}</a></td>
                                           {#<td colspan="2"><a class="basic" rel="{{ path('admin_user_mailer_body', {'id': id}) }}" href="{{ path('admin_user_mailer_body', {'id': id}) }}" title="{{ email.title }}" style="btn"><i class="fa fa-eye"></i></a></td>#}
                                           <td colspan="2"><a class="basic" rel="{{ path('admin_user_mailer_body', hash({'id': email.id})) }}" href="{{ path('admin_user_mailer_body', hash({'id': email.id})) }}" title="{{ email.title }}" style="btn"><i class="icon-eye-open"></i></a></td>
                                        </tr>
                                    {% endfor %}
                                     </tbody>
                                  </table>
                               </div>
                            </div>
                            <script src="{{ asset('twtools/javascript/cluetip/jquery.cluetip.all.min.js') }}"></script><script>
                                $('.basic').cluetip({attribute: 'rel', width:650, 'sticky': true, closePosition:'top', closeText:'<i class="fa fa-times"></i>'});
                            </script>
                            {% endif %}
                         </div>
                      </div>
                   </div>
                   <!--end span9-->
                </div>
                <div id="tab_update" class="tab-pane profile-classic row-fluid">
                    <form action="" method="post" {{ form_enctype(form) }} novalidate="novalidate">
                        <span class="row form-horizontal">
                            <span class="span8">
                                <fieldset>
                                    {{ form_row(form.civility, {'form_type' : 'horizontal', attr: {'class' : 'input-xlarge'}}) }}
                                    {{ form_row(form.firstname, {'form_type' : 'horizontal', attr: {'class' : 'input-xlarge'}}) }}
                                    {{ form_row(form.lastname, {'form_type' : 'horizontal', attr: {'class' : 'input-xlarge'}}) }}
                                    {{ form_row(form.birthdate, {'form_type' : 'horizontal', attr: {'class' : 'input-xlarge'}}) }}
                                    {{ form_row(form.phone, {'form_type' : 'horizontal', attr: {'class' : 'input-xlarge'}}) }}
                                    {{ form_row(form.facebookId, {'form_type' : 'horizontal', attr: {'class' : 'input-xlarge'}}) }}
                                    {{ form_row(form.language, {'form_type' : 'horizontal', attr: {'class' : 'input-xlarge'}}) }}
                                </fieldset>
                                <fieldset>
                                <legend>{% trans %}Addresses{% endtrans %}</legend>
                                    {{ form_row(form.displayname, {'form_type' : 'horizontal', attr: {'class' : 'input-xlarge'}}) }}
                                    {{ form_row(form.phone, {'form_type' : 'horizontal', attr: {'class' : 'input-xlarge'}}) }}
                                    {{ form_row(form.cellphone, {'form_type' : 'horizontal', attr: {'class' : 'input-xlarge'}}) }}
                                    {{ form_row(form.address, {'form_type' : 'horizontal', attr: {'class' : 'input-xlarge'}}) }}
                                    {{ form_row(form.zip, {'form_type' : 'horizontal', attr: {'class' : 'input-xlarge'}}) }}
                                    {{ form_row(form.city, {'form_type' : 'horizontal', attr: {'class' : 'input-xlarge'}}) }}
                                    {{ form_row(form.country, {'form_type' : 'horizontal', attr: {'class' : 'input-xlarge'}}) }}
                                </fieldset>
                            </span>
                            <span class="span4">
                                <fieldset>
                                <legend>{% trans %}Connection and access{% endtrans %}</legend>
                                    {{ form_row(form.username, {attr: {'class' : 'input-xlarge'}}) }}
                                    {{ form_row(form.email, {attr: {'class' : 'input-xlarge'}}) }}
                                    {{ form_row(form.password, {attr: {'class' : 'input-xlarge'}}) }}
                                    {{ form_row(form.isSuperAdmin, {attr: {'class' : 'input-xlarge'}}) }}
                                    {{ form_row(form.status, {attr: {'class' : 'input-xlarge'}}) }}
                                </fieldset>
                                {{ form_errors(form) }}
                                {{ form_rest(form, {'form_type' : 'horizontal', attr: {'class' : 'input-xlarge'}}) }}
                            </span>
                        </span>

                        <div class="centered clearfix">
                            <hr />
                            <input type="submit" name="validate" class="btn btn-primary btn-large" />
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block javascripts %}
<script>
$(function() {
  $('.tab-section').on('shown', function (e) {
    //save the latest tab; use cookies if you like 'em better:
    //
    localStorage.setItem('tabSection', $(this).attr('href'));
  });

  //go to the latest tab, if it exists:
  var lastTab = localStorage.getItem('tabSection');
  if (lastTab) {
    //alert(lastTab);
     $('.tab-section[href=' + lastTab + ']').tab('show');
  } else {
    // Set the first tab if cookie do not exist
    $('.tab-section[data-toggle="tab"]:first').tab('show');
  }
});
</script>
{% endblock %}