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

{% block title %}Mon profil{% endblock %}

{% block stylesheets %}
<link href="/assets/selectize-bootstrap-4-style-master/dist/css/selectize.bootstrap4.css" rel="stylesheet">
	<style>
		.radio input {

			margin-left: 10px;

		}
		.mandatory-star {
			color: red;
			font-size: 25px;
		}
		.mandatory-text {
			color: red;
		}

    .text-error {
      color: #dc3545;
      font-size: 80%;
    }

	</style>
{% endblock %}

{% block body %}


<div class="container py-3">
  <div class="row">
    <div class="col-md-12">

      <div class="my-3 p-4 bg-white rounded-4 shadow-sm border border-light">

        <h5 class="border-bottom pb-2 mb-3 d-flex align-items-center">
          <i data-feather="user" class="me-2 text-primary"></i> Mon profil 
          <span class="text-danger ms-1">*</span>
        </h5>

        <form class="form-horizontal" autocomplete="off" method="POST" {{ form_enctype(form) }} novalidate>
          {{ form_errors(form) }}

          <!-- Identité -->
          <dl class="row p-3 mb-4">
            <dt class="col-md-3 text-md-end {% if form.vars.value.role == NULL %}text-danger{% endif %}">
              Je suis
            </dt>
            <dd class="col-md-9">

              <div class="btn-group" role="group" aria-label="Choix du rôle">
                {% for choice in form.role %}
                  <input 
                    type="radio"
                    class="btn-check"
                    name="{{ choice.vars.full_name }}"
                    id="{{ choice.vars.id }}"
                    value="{{ choice.vars.value }}"
                    {% if choice.vars.checked %}checked{% endif %}
                  >
                  <label class="btn btn-outline-primary" for="{{ choice.vars.id }}">
                    {{ choice.vars.label }}
                  </label>
                {% endfor %}
              </div>

              {% if not form.role.vars.valid %}
                <div class="invalid-feedback d-block">
                  {{ form_errors(form.role) }}
                </div>
              {% endif %}

            </dd>
          </dl>


          <h6 class="border-bottom pb-2 mb-3">Mes informations personnelles</h6>

          <dl class="row p-3">

            <dt class="col-md-3 text-md-end {% if form.vars.value.civility == NULL %}text-danger{% endif %}">
              Civilité
            </dt>
            <dd class="col-md-9">

              <div class="btn-group" role="group" aria-label="Choix de la civilité">
                {% for choice in form.civility %}
                  <input 
                    type="radio"
                    class="btn-check"
                    name="{{ choice.vars.full_name }}"
                    id="{{ choice.vars.id }}"
                    value="{{ choice.vars.value }}"
                    {% if choice.vars.checked %}checked{% endif %}
                  >
                  <label class="btn btn-outline-primary" for="{{ choice.vars.id }}">
                    {{ choice.vars.label }}
                  </label>
                {% endfor %}
              </div>

              {% if not form.civility.vars.valid %}
                <div class="invalid-feedback d-block">
                  {{ form_errors(form.civility) }}
                </div>
              {% endif %}

            </dd>



            <dt class="col-md-3 text-md-end {% if form.vars.value.lastname == NULL %}text-danger{% endif %}">Nom</dt>
            <dd class="col-md-9">{{ form_widget(form.lastname, { 'attr': {'class': 'form-control'} }) }}</dd>

            <dt class="col-md-3 text-md-end {% if form.vars.value.firstname == NULL %}text-danger{% endif %}">Prénom</dt>
            <dd class="col-md-9">{{ form_widget(form.firstname, { 'attr': {'class': 'form-control'} }) }}</dd>

            <dt class="col-md-3 text-md-end {% if form.vars.value.birthday == NULL %}text-danger{% endif %}">Date de naissance</dt>
            <dd class="col-md-9">{{ form_widget(form.birthday, { 'attr': {'class': 'form-control'} }) }}</dd>

            <dt class="col-md-3 text-md-end">Mobile</dt>
            <dd class="col-md-9">{{ form_widget(form.mobile, { 'attr': {'class': 'form-control'} }) }}</dd>
          </dl>

          <h6 class="border-bottom pb-2 mb-3">Votre photo de profil</h6>
          <dl class="row p-3">
            <dt class="col-md-3 text-md-end">Image</dt>
            <dd class="col-md-9">{{ form_widget(form.avatar, { 'attr': {'class': 'form-control'} }) }}</dd>
          </dl>

          <!-- Adresse -->
          <h6 class="border-bottom pb-2 mb-3">
            Votre adresse <span class="text-danger">*</span>
          </h6>

          <div id="alertLocation" class="alert alert-danger d-none" role="alert">
            Vous devez sélectionner votre adresse complète.
          </div>

          <div class="row g-3 px-3">
            <div class="col-md-6">{{ form_row(form.lat, {'attr': {'class': 'form-control', 'placeholder': 'Latitude'}}) }}</div>
            <div class="col-md-6">{{ form_row(form.lng, {'attr': {'class': 'form-control', 'placeholder': 'Longitude'}}) }}</div>
          </div>

          <div class="mt-3 mb-3" id="map" style="height:160px;border: 2px solid #ced4da;border-radius: 10px;background:#f1f3f5;"></div>

          <dl class="row p-3">
            <dt class="col-md-3 text-md-end text-danger">Pays</dt>
            <dd class="col-md-9">
              {{ form_widget(form.country, { 'attr': { 'class': 'form-select' } }) }}
            </dd>

            <dt class="col-md-3 text-md-end text-danger">Adresse</dt>
            <dd class="col-md-9">{{ form_widget(form.address, { 'attr': {'class': 'form-control'} }) }}</dd>

            <dt class="col-md-3 text-md-end text-danger">Code postal</dt>
            <dd class="col-md-9">{{ form_widget(form.department, { 'attr': {'class': 'form-control'} }) }}</dd>

            <dt class="col-md-3 text-md-end text-danger">Ville</dt>
            <dd class="col-md-9">{{ form_widget(form.city, { 'attr': {'class': 'form-control'} }) }}</dd>

            {{ form_row(form.state, {'label': 'Département', 'attr': {'class': 'form-control mb-2'}}) }}
            {{ form_row(form.stateSecond, {'label': 'Région', 'attr': {'class': 'form-control mb-2'}}) }}
          </dl>

          <!-- Présentation -->
          <h6 class="border-bottom pb-2 mb-3">
            Votre présentation <small class="text-muted">(vous pouvez donner des cours en plusieurs langues)</small>
          </h6>

          <ul class="nav nav-pills mb-3" id="langTabs" role="tablist">
            {% set langs = {'fr':'Français','en':'Anglais','es':'Espagnol','de':'Allemand','pt':'Portugais','it':'Italien'} %}
            {% for code,label in langs %}
              <li class="nav-item" role="presentation">
                <button class="nav-link {% if loop.first %}active{% endif %}" id="{{ code }}-tab" data-bs-toggle="tab" data-bs-target="#{{ code }}" type="button" role="tab">
                  <img src="https://www.tutorify.io/flags/{{ code }}.svg" width="25" class="me-1"/> {{ label }}
                </button>
              </li>
            {% endfor %}
          </ul>

          <div class="tab-content border rounded-3 p-3 bg-light">
            <div class="tab-pane fade show active" id="fr">
              {{ form_widget(form.content, { 'attr': {'class': 'form-control', 'placeholder': 'Présentation en français', 'rows': '5'} }) }}
            </div>
            <div class="tab-pane fade" id="en">{{ form_widget(form.contentEn, { 'attr': {'class': 'form-control', 'placeholder': 'Presentation in English', 'rows': '5'} }) }}</div>
            <div class="tab-pane fade" id="es">{{ form_widget(form.contentEs, { 'attr': {'class': 'form-control', 'placeholder': 'Presentación en español', 'rows': '5'} }) }}</div>
            <div class="tab-pane fade" id="de">{{ form_widget(form.contentDe, { 'attr': {'class': 'form-control', 'placeholder': 'Deutsche Präsentation', 'rows': '5'} }) }}</div>
            <div class="tab-pane fade" id="pt">{{ form_widget(form.contentPt, { 'attr': {'class': 'form-control', 'placeholder': 'Apresentação em português', 'rows': '5'} }) }}</div>
            <div class="tab-pane fade" id="it">{{ form_widget(form.contentIt, { 'attr': {'class': 'form-control', 'placeholder': 'Presentazione in italiano', 'rows': '5'} }) }}</div>
          </div>

          <!-- CESU -->
          <h6 class="border-bottom pb-2 mb-3 mt-4">CESU</h6>
          <dl class="row p-3">
            <dt class="col-md-3 text-md-end">Chèques emploi service</dt>
            <dd class="col-md-9">{{ form_widget(form.cesu) }}</dd>
          </dl>

          <!-- Paramètres -->
          <h6 class="border-bottom pb-2 mb-3">Paramètres</h6>
          <dl class="row p-3">
            <dt class="col-md-3 text-md-end">Notifications</dt>
            <dd class="col-md-9">{{ form_widget(form.notifications) }}</dd>

            <dt class="col-md-3 text-md-end">Profil en ligne</dt>
            <dd class="col-md-9">{{ form_widget(form.status) }}</dd>
          </dl>

          {{ form_widget(form._token) }}

          <p class="mt-2 text-muted small">
            <span class="text-danger">*</span> Champs obligatoires
          </p>

          <div class="text-end">
            <button class="btn btn-primary rounded-pill px-4" type="submit">
              <i data-feather="save" class="me-2"></i> Enregistrer
            </button>
          </div>
        </form>
      </div>

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

<script>
  // Gestion coordonnées carte
  const lat = parseFloat("{{ form.vars.value.lat }}");
  const lng = parseFloat("{{ form.vars.value.lng }}");
  const myLatLng = (!isNaN(lat) && !isNaN(lng)) ? {lat: lat, lng: lng} : {lat: 48.8566, lng: 2.3522};
  console.log("Position initiale:", myLatLng);
</script>


{% endblock body %}
{% block javascripts %}
    <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: 'app_form_profile_type_city',
      administrative_area_level_1: 'app_form_profile_type_stateSecond',
      administrative_area_level_2: 'app_form_profile_type_state',
      //country: 'app_form_profile_type_country',
      postal_code: 'app_form_profile_type_department'  
    };

    function hide (elements) {
      elements = elements.length ? elements : [elements];
      for (var index = 0; index < elements.length; index++) {
        elements[index].style.display = 'none';
      }
    }

    function show (elements) {
      elements = elements.length ? elements : [elements];
      for (var index = 0; index < elements.length; index++) {
        elements[index].style.display = '';
      }
    }

    function initAutocomplete() {
      
      //console.log("lang=" + jQuery( "#app_form_profile_type_country-selectized" ).val());
      
      hide(document.getElementById('alertLocation'));

      autocomplete = new google.maps.places.Autocomplete(
        (document.getElementById('app_form_profile_type_address')), {types: ['geocode'], componentRestrictions: {country: ["fr", "be", "ch"/*, "ca"*/]}}

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


      map = new google.maps.Map(document.getElementById('map'), {
          center: myLatLng,
          zoom: 12
      });

      map.setOptions({draggable: false});

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


    }

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

       //console.log(place.address_components);
      
      for (var form in myForm) {
          document.getElementById(myForm[form]).value = '';
      }
      
      var lat = place.geometry.location.lat();
      var lng = place.geometry.location.lng();

      document.getElementById("app_form_profile_type_lat").value = place.geometry.location.lat();
      document.getElementById("app_form_profile_type_lng").value = place.geometry.location.lng();


      var myLatLng = {lat: lat, lng: lng};
      map = new google.maps.Map(document.getElementById('map'), {
          center: myLatLng,
          zoom: 12
      });

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

      var has_postal_code = false;

      for (var i = 0; i < place.address_components.length; i++) 
      {
        var addressType = place.address_components[i].types[0];
        if (componentForm[addressType]) 
        {
          var val = place.address_components[i][componentForm[addressType]];
          document.getElementById(myForm[addressType]).value = val;
          //console.log(addressType+" ("+myForm[addressType]+") :"+val);

          if (addressType == 'postal_code')
          {
            console.log('Postal code');
            has_postal_code = true;
          }
        }
      }

      if (has_postal_code == false)
      {
          show(document.getElementById('alertLocation'));
      }
      else
      {
          hide(document.getElementById('alertLocation'));
      }


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