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

{% block stylesheet %}
<style>
.circle-avatar{
/* make it responsive */
max-width: 100%;
width:100%;
height:auto;
display:block;
/* div height to be the same as width*/
padding-top:100%;

/* make it a cirkle */
border-radius:50%;

/* Centering on image`s center*/
background-position-y: center;
background-position-x: center;
background-repeat: no-repeat;

/* it makes the clue thing, takes smaller dimention to fill div */
background-size: cover;

/* it is optional, for making this div centered in parent*/
margin: 0 auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
</style>
{% endblock %}

{% block body %}
	<div class="img-cover img-cover-purple" style="background-image: url('/img/background_blue_v0011.jpg')">
		<div class="container p-t-b-50 m-t-60">
			<div class="row text-center">
				<div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1">
					<h3 class="no-m m-b-15 font-thin" style="color: white;">Mon compte</h3>

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


	<div class="p-t-b-10 b-b-b-l">
		<div class="container">
			<div class="row">
				<div class="col-sm-6 m-t-b-10">
					<strong>0</strong> offres
				</div>
				<div class="col-sm-6 text-right m-t-b-10">
					<ol class="breadcrumb no-p-r-l no-m no-bg no-p">
						<li><a href="#">Mon compte</a></li>
						<li class="active">Modifier votre profil</li>
					</ol>
				</div>
			</div>
		</div>
	</div>
	<div class="content-padding p-t-20">
		<div class="container">
			<div class="row">

				<div class="col-lg-12">
					<div class="ibox float-e-margins">
						<div class="ibox-content">
							<div class="row">


								
								<form class="form-horizontal" method="POST" action="" {{ form_enctype(form) }} class="form form-horizontal" novalidate> 
									{{ form_errors(form) }}
									<div class="col-sm-4">




										

										{% include 'App::leftbar_setting.html.twig' %}









										{% if app.user.profile and app.user.profile.avatar %}

											<div class="row">
												<div class="col-sm-8 col-md-offset-2">
													<p class="text-center" style="text-align: center">
														<div class="circle-avatar" style="background-image:url(/uploads/avatar/{{ app.user.profile.avatar.path }})"></div>
													</p>
												</div>
											</div>

										{% endif %}

										<div class="list-group text-center">
						


												<div class="col-lg-12 file-upload">
										
												  <h5 class="centered">Modifier une photo de profil</h5>
												  {{ form_widget(form.avatar) }}
											
												</div>


										</div>





									</div>
									<div class="col-sm-8">



										<div style="margin:30px;">


										{% if progress %}

											<div class="alert alert-warning" role="alert"><i class="fa fa-exclamation-circle" aria-hidden="true"></i> Vous devez compléter votre profil.</div>

										{% endif %}



										<div class="text-center row"> 

											<div id="selectProf" style="cursor:pointer;color:#2c3e50;font-size:23px;"  class="col-md-6">
												<i class="fa fa-circle-o" aria-hidden="true"></i> Je donne des cours
											</div>

											<div  id="selectEleve" style="cursor:pointer;color:#2c3e50;font-size:23px;"  class="col-md-6">
												<i class="fa fa-circle-o" aria-hidden="true"></i> Je recherche des profs
											</div>

										</div>

										<hr />
					
										


										<div class="form-group" style="display: none;">
											<label  class="col-sm-3" {% if progress %}style="color:#e74c3c;"{% endif %}>Je suis</label>
											<div class="col-sm-3">{{ form_widget(form.role) }}</div>
										</div>	

										<div class="row">
											<div class="form-group">
												<label style="font-weight: 900;margin-left:10px;">Civilité:</label>

													{% for key, civilityItem in form.civility.children %}

														<div class="radio" style="padding: 10px;">
															<label>
																{{ form_widget(civilityItem, { 'attr': {'class': 'form-control', 'placeholder': 'Civilité'} }) }}
																{{ form_label(civilityItem) }}
															</label>
														</div>

													{% endfor %}

											</div>  
										</div>

										<div class="form-group">
											<label style="font-weight: 900;">Prénom:</label>
											{{ form_widget(form.firstname, { 'attr': {'class': 'form-control', 'placeholder': 'Prénom'} }) }}
										</div>   
										<div class="form-group">
											<label style="font-weight: 900;">Nom:</label>
											{{ form_widget(form.lastname, { 'attr': {'class': 'form-control', 'placeholder': 'Nom'} }) }}
										</div> 
										<div class="form-group">
											<label style="font-weight: 900;">Date de naissance:</label>
											{{ form_widget(form.birthday, { 'attr': {'class': 'form-control', 'placeholder': 'Date de naissance'} }) }}
										</div>  


										<div class="form-group">
											<label style="font-weight: 900;">Adresse:</label>
											{{ form_widget(form.address, { 'attr': {'class': 'form-control', 'placeholder': 'Adresse', 'autocomplete':'false'} }) }}
										</div>

										<div class="well"  style="display:none;">

										{{ form_widget(form.department, { 'attr': {'class': 'form-control', 'placeholder': 'Code Postal', 'autocomplete':'false'} }) }}
										{{ form_widget(form.city, { 'attr': {'class': 'form-control', 'placeholder': 'City', 'autocomplete':'false'} }) }}
										{{ form_widget(form.state, { 'attr': {'class': 'form-control', 'placeholder': 'States', 'autocomplete':'false'} }) }}
										{{ form_widget(form.country, { 'attr': {'class': 'form-control', 'placeholder': 'Country', 'autocomplete':'false'} }) }}
										{{ form_widget(form.lat, { 'attr': {'class': 'form-control', 'placeholder': 'Lat', 'autocomplete':'false'} }) }}
										{{ form_widget(form.lng, { 'attr': {'class': 'form-control', 'placeholder': 'Lng', 'autocomplete':'false'} }) }}

										</div>

										<div class="well" style="display:none;">
										    <table id="address">
										      <tr>
										        <td class="label">Street address</td>
										        <td class="slimField"><input class="field" id="street_number"
										              disabled="true"></input></td>
										        <td class="wideField" colspan="2"><input class="field" id="route"
										              disabled="true"></input></td>
										      </tr>
										      <tr>
										        <td class="label">City</td>
										        <td class="wideField" colspan="3"><input class="field" id="locality"
										              disabled="true"></input></td>
										      </tr>
										      <tr>
										        <td class="label">State</td>
										        <td class="slimField"><input class="field"
										              id="administrative_area_level_1" disabled="true"></input></td>
										        <td class="label">Zip code</td>
										        <td class="wideField"><input class="field" id="postal_code"
										              disabled="true"></input></td>
										      </tr>
										      <tr>
										        <td class="label">Country</td>
										        <td class="wideField" colspan="3"><input class="field"
										              id="country" disabled="true"></input></td>
										      </tr>
										      <tr>
										        <td class="label">Lat</td>
										        <td class="wideField" colspan="3"><input class="field"
										              id="lat" disabled="true"></input></td>
										      </tr>

										      <tr>
										        <td class="label">Lng</td>
										        <td class="wideField" colspan="3"><input class="field"
										              id="lng" disabled="true"></input></td>
										      </tr>
										    </table>
										</div>




										<div class="form-group">
											<label style="font-weight: 900;">Mobile:</label>
											{{ form_widget(form.mobile, { 'attr': {'class': 'form-control', 'placeholder': 'Mobile'} }) }}
										</div> 

										<div class="well well-sm">
											<label class="checkbox" id="selectCesu" style="padding-left:20px;">
												<input type="checkbox" id="cesu_ursaff" value="0"> CESU, ou Chèque Emploi Service Universel
											</label>
											
											<p>Le système CESU peut-être utilisé soit pour déclarer et payer directement un salarié à domicile.</p>
										</div>

										<div class="form-group"  style="padding-left:20px;display:none;">
											<span>{{ form_widget(form.cesu, { 'attr': {'display': 'form-control', 'placeholder': 'CESU'} }) }} </span> 
										</div>   

										<div class="form-group">
											<label style="font-weight: 900;">Description:</label>
											{{ form_widget(form.content, { 'attr': {'class': 'form-control', 'rows': '10', 'placeholder': 'Description'} }) }}
										</div> 

	
										<div class="form-group"  style="padding-left:20px;">
											<span>{{ form_widget(form.notifications, { 'attr': {'display': 'form-control', 'placeholder': 'Modified'} }) }} </span> 
										</div>

										<div class="form-group">
											<label  class="col-sm-3">E-mail Format</label>
											<div class="col-sm-3">{{ form_widget(form.mailFormat) }}</div>
										</div>

										<div class="form-group"  style="padding-left:20px;">
											<span>{{ form_widget(form.status, { 'attr': {'display': 'form-control', 'placeholder': 'Modified'} }) }} </span> 
										</div> 
										<hr />
										{{ form_widget(form._token) }}
										<input class="btn btn-lg btn-primary" type="submit" />


										</div> <!-- List Group -->



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


							
						</div>


					</div>
				</div>

			</div>

		</div>

	</div>

{% endblock body %}
{% block javascripts %}




	<!-- <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDgIqxWbmTk2jHfOaNYEXC73GsWjal1Osw&amp;libraries=places"
  		type="text/javascript"></script> --> 
	<script>

		// key=AIzaSyDgIqxWbmTk2jHfOaNYEXC73GsWjal1Osw

		var prof_checked = document.getElementById('app_form_profile_type_role_0').checked;
		var eleve_checked = document.getElementById('app_form_profile_type_role_1').checked;

		if (prof_checked)
		{
			document.getElementById('app_form_profile_type_role_0').checked = true;
	        document.getElementById ("selectProf").innerHTML = '<i class="fa fa-dot-circle-o" aria-hidden="true"></i> Je donne des cours';
		}

		if (eleve_checked)
		{
	        document.getElementById('app_form_profile_type_role_1').checked = true;
	        document.getElementById ("selectEleve").innerHTML = '<i class="fa fa-dot-circle-o" aria-hidden="true"></i> Je recherche des profs';
		}

		console.log(prof_checked + " " + eleve_checked);


			var cesuOn = "{% if app.user.profile %}{{ app.user.profile.cesu }}{% endif %}";
	        if (cesuOn == 1)
	        {
 				console.log('Cesu Checked');
 				 $("#app_form_profile_type_cesu").val(1);
 				 document.getElementById('cesu_ursaff').checked = true;
	        }
	        else
	        {
 				console.log('Cesu No Checked');
 				 $("#app_form_profile_type_cesu").val(0);
	        }



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

		function initAutocomplete() 
		{
		  // Create the autocomplete object, restricting the search to geographical
		  // location types.
		  autocomplete = new google.maps.places.Autocomplete(
		      /** @type {!HTMLInputElement} */(document.getElementById('app_form_profile_type_address')),
		      {types: ['geocode'], componentRestrictions: {country: "fr"}
		  });

		  // When the user selects an address from the dropdown, populate the address
		  // fields in the form.
		  autocomplete.addListener('place_changed', fillInAddress);
		}



		// [START region_fillform]
		function fillInAddress() 
		{
		  // Get the place details from the autocomplete object.
		  var place = autocomplete.getPlace();


			document.getElementById("app_form_profile_type_lat").value = '';
			document.getElementById("app_form_profile_type_lng").value = '';
		  	document.getElementById("app_form_profile_type_city").value = '';
		  	document.getElementById("app_form_profile_type_department").value = '';
		  	document.getElementById("app_form_profile_type_state").value = '';
		  	document.getElementById("app_form_profile_type_country").value = '';

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

		  for (var component in componentForm) 
		  {
		    document.getElementById(component).value = '';
		    document.getElementById(component).disabled = false;
		  }

		  // Get each component of the address from the place details
		  // and fill the corresponding field on the form.
		  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(addressType).value = val;
		    }
		  }

		  document.getElementById("app_form_profile_type_city").value = document.getElementById("locality").value;
		  document.getElementById("app_form_profile_type_department").value = document.getElementById("postal_code").value;
		  document.getElementById("app_form_profile_type_state").value = document.getElementById("administrative_area_level_1").value;
		  document.getElementById("app_form_profile_type_country").value = document.getElementById("country").value;
		}
		// [END region_fillform]

		// [START region_geolocation]
		// Bias the autocomplete object to the user's geographical location,
		// as supplied by the browser's 'navigator.geolocation' object.
		function geolocate() 
		{
		  if (navigator.geolocation) {
		    navigator.geolocation.getCurrentPosition(function(position) {
		      var geolocation = {
		        lat: position.coords.latitude,
		        lng: position.coords.longitude
		      };
		      var circle = new google.maps.Circle({
		        center: geolocation,
		        radius: position.coords.accuracy
		      });
		      autocomplete.setBounds(circle.getBounds());
		    });
		  }
		}
		// [END region_geolocation]

/*
		function initialize() 
		{
			var options = {
				types: ['geocode'],
			  	componentRestrictions: {country: "fr"}
			};


			var input = document.getElementById('app_form_profile_type_address');
			var autocomplete = new google.maps.places.Autocomplete(input, options);
		}
		google.maps.event.addDomListener(window, 'load', initialize);
*/








		$(document).ready(function() {

			// app_form_profile_type_role_0 // Prof

			// app_form_profile_type_role_1 // Eleve

		 jQuery('#app_form_profile_type_avatar_file').addClass('centered');

		/* jQuery('#app_form_profile_type_avatar_file').hide();

		*/



		 jQuery('#selectProf').click(function(){
	        console.log('Prof');

	        document.getElementById('app_form_profile_type_role_0').checked = true;
	        document.getElementById ("selectProf").innerHTML = '<i class="fa fa-dot-circle-o" aria-hidden="true"></i> Je donne des cours';

	        document.getElementById('app_form_profile_type_role_1').checked = false;
	        document.getElementById ("selectEleve").innerHTML = '<i class="fa fa-circle-o" aria-hidden="true"></i> Je recherche des profs';

	     });

		 jQuery('#selectEleve').click(function(){
	        console.log('Eleve');

	        document.getElementById('app_form_profile_type_role_1').checked = true;
	        document.getElementById ("selectEleve").innerHTML = '<i class="fa fa-dot-circle-o" aria-hidden="true"></i> Je recherche des profs';


	        document.getElementById('app_form_profile_type_role_0').checked = false;
	        document.getElementById ("selectProf").innerHTML = '<i class="fa fa-circle-o" aria-hidden="true"></i> Je donne des cours';

	     });
	     
		var input = document.getElementById('app_form_profile_type_address');
		google.maps.event.addDomListener(input, 'keydown', function(e) { 
		    if (e.keyCode == 13) { 
		        e.preventDefault(); 
		    }
		}); 


		 jQuery('#selectCesu').click(function(){
	       

	        //console.log( document.getElementById('cesu_ursaff').checked );

	        if (document.getElementById('cesu_ursaff').checked )
	        {
 				console.log('Cesu Checked');
 				 $("#app_form_profile_type_cesu").val(1);
	        }
	        else
	        {
 				console.log('Cesu No Checked');
 				 $("#app_form_profile_type_cesu").val(0);
	        }
	        
	     });



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