{namespace core=TYPO3\CMS\Core\ViewHelpers}
{namespace be=TYPO3\CMS\Backend\ViewHelpers}
<f:layout name="Localize" />

<f:section name="main">
	<script>
		jQuery.noConflict();
		function EMapsValidate(){
			document.getElementById("EMapsForm").submit();
		}
		<f:comment>
		<f:if condition="{rows.toLocalize}">					
			var eMapsGeocoder;
			var eMapsId = '';
			var eMapsPageId = '{pageid}';
			var eMapsUrlUpdate = '<f:format.htmlentitiesDecode>{urlUpdate}</f:format.htmlentitiesDecode>';
			
			function EMapsInit(){
				eMapsGeocoder = new google.maps.Geocoder();
			}
			
			function EMapsLocalize(){
				var todo = TYPO3.jQuery('.emaps_localize.db_list_normal.emaps_todo');
				if(todo.length){
					eMapsId = todo.eq(0).attr('id');
					coord = TYPO3.jQuery('#coord_'+eMapsId).html();
					
					eMapsGeocoder.geocode( { 'address': coord}, function(results, status) {
						if (status == google.maps.GeocoderStatus.OK) {
							bounds = results[0].geometry.bounds;
							if(!bounds){
								bounds = new google.maps.LatLngBounds(
									results[0].geometry.viewport.getSouthWest(), 
									results[0].geometry.viewport.getNorthEast()
								);
							}
							center = bounds.getCenter();
							lat = center.lat();
							lng = center.lng();
							TYPO3.jQuery('#lat_'+eMapsId).html(lat);
							TYPO3.jQuery('#lng_'+eMapsId).html(lng);
							TYPO3.jQuery('#status_'+eMapsId).html(
								TYPO3.jQuery('#emaps_bouton_ok').html()
							);
							TYPO3.jQuery('#'+eMapsId).removeClass('emaps_todo').addClass('emaps_ok');
							EMapsUpdateBdd(eMapsId, lat, lng);
						} else {
							TYPO3.jQuery('#lat_'+eMapsId).html('Geocode was not successful for the following reason: ');
							TYPO3.jQuery('#lng_'+eMapsId).html(status);
							TYPO3.jQuery('#status_'+eMapsId).html(
								TYPO3.jQuery('#emaps_bouton_error').html()
							);
							TYPO3.jQuery('#'+eMapsId).removeClass('emaps_todo').addClass('emaps_error');
							setTimeout(function(){ EMapsLocalize(); }, 2000);
						}
					});
				}else{
					TYPO3.jQuery('#emaps_finish').show();
				}
			}
			
			function EMapsUpdateBdd(key, lat, lng){
				url = eMapsUrlUpdate;
				url += '&emaps_id='+eMapsPageId;
				url += '&emaps_key='+key;
				url += '&emaps_lat='+lat;
				url += '&emaps_lng='+lng;
				
				TYPO3.jQuery.ajax({
					url: url,
					success: function(result){
						setTimeout(function(){ EMapsLocalize(); }, 2000);
					},
					error: function(error) {
						TYPO3.jQuery('#lat_'+eMapsId).html('BDD update was not successful for the following reason: ');
						TYPO3.jQuery('#lng_'+eMapsId).html('Authentification error');
						TYPO3.jQuery('#status_'+eMapsId).html(
							TYPO3.jQuery('#emaps_bouton_error').html()
						);
						TYPO3.jQuery('#'+eMapsId).removeClass('emaps_todo').addClass('emaps_error');
						setTimeout(function(){ EMapsLocalize(); }, 2000);
					}
				});
			}
			
			google.maps.event.addDomListener(window, 'load', EMapsInit);
		</f:if>
		</f:comment>
	</script>
	<f:if condition="{confok}">
		<f:then>
		<f:if condition="{tables}">
			<f:then>
				<div id="emaps_finish" style="display:none">
					<div class="typo3-messages alert alert-info">
						<div class="message-body">
							<f:translate key="be.localize.finish" />
						</div>
					</div>
					<br>
					<br>
				</div>
				<div class="typo3-message message-ok">
					<div class="message-body">
						<f:translate key="be.localize.header" />
						<br>
						<br>
						<f:form style="display:flex;flex-flow: row wrap;justify-content: flex-start;margin:10px 100px 5px 10px;color:black;" action="index" id="EMapsForm">
							<span style="padding: 0 20px;">
								<select id="table" name="tx_emaps_web_emapsmaps[table]" onchange="EMapsValidate();">
									<option value="" ><f:translate key="be.localize.chooseTable" /></option>
									<f:for each="{tables}" as="table">
										<f:if condition="{request.table}=={table.table}">
											<f:then>
												<option value="{table.table}" selected="selected">
													{table.label} [{table.table}]
												</option>
											</f:then>
											<f:else>
												<option value="{table.table}">
													{table.label} [{table.table}]
												</option>
											</f:else>
										</f:if>
									</f:for>
								</select>
							</span>
						</f:form>
						<f:if condition="{rows}">
							<br>
							<br>
							<div style="display:flex;flex-flow: column wrap;justify-content: flex-start;margin:10px 100px 5px 10px;">
								<span>
									<span><f:translate key="be.localize.pattern" /></span>
									<strong>{rows.pattern}</strong>
								</span>
								<span>
									<span><f:translate key="be.localize.lat" /></span>
									<strong>{rows.lat}</strong>
								</span>
								<span>
									<span><f:translate key="be.localize.lng" /></span>
									<strong>{rows.lng}</strong>
								</span>
								<span>
									<span><f:translate key="be.localize.total" /></span>
									<strong>{rows.total}</strong>
								</span>
								<span>
									<span><f:translate key="be.localize.toLocalize" /></span>
									<strong>{rows.toLocalize}</strong>
								</span>
							</div>
							<f:comment> Ne fonctionne pas depuis les v8, on verra plus tard
								<f:if condition="{rows.toLocalize}">							
									<span style="display:flex;flex-flow: row wrap;justify-content: flex-end;padding: 0 30px;">	
										<a href="#" onClick="EMapsLocalize();">
											<strong style="margin: 0 10px;"><f:translate key="be.localize.start" /></strong>
											<core:Icon identifier="actions-view-paging-next" />
										</a>
									</span>
									<div style="display:none;">
										<span id="emaps_bouton_ok">
											<f:render partial="Localize/Icon" arguments="{ok: 1}" />
										</span>
										<span id="emaps_bouton_error">
											<f:render partial="Localize/Icon" arguments="{error: 1}" />
										</span>
									</div>
								</f:if>
							</f:comment>
							<br>
							<br>
							<div class="table-fit">
								<table cellpadding="0" cellmargin="0" cellspacing="0" class="table table-striped table-hover table-condensed"  style="text-align: center;">
									<thead>
									<tr class="t3-row-header">
										<td></td>
										<td><span><f:translate key="be.localize.row.title" /></span></td>
										<td><span><f:translate key="be.localize.row.coord" /></span></td>
										<td><span><f:translate key="be.localize.row.lat" /></span></td>
										<td><span><f:translate key="be.localize.row.lng" /></span></td>
										<td><span><f:translate key="be.localize.row.status" /></span></td>
									</tr>
									</thead>
									<tbody>
									<f:for each="{rows.rows}" as="row">
										<tr class="emaps_localize db_list_normal {f:if(condition: row.status, then: 'emaps_ok', else: 'emaps_todo')}" id="{row.key}">
											<td>
												<a href="{be:uri.editRecord(uid: row.uid, table: row.table)}">
													<core:icon identifier="actions-document-open"/>
												</a>
												<f:comment>
													<!-- Censé afficher le menu contextuel permettant édition, cacher, copie etc. de l'enregistrement, mais ne fonctionne pas -->
													<a href="#" class="t3js-contextmenutrigger" data-table="{row.table}" data-uid="{row.uid}">
														<core:iconForRecord table="{row.table}" row="{row}" />
														{row.title}
													</a>
												</f:comment>
											</td>
											<td>
												{row.title}
											</td>
											<td><span id="coord_{row.key}">{row.coord}</span></td>
											<td><span id="lat_{row.key}">{row.lat}</span></td>
											<td><span id="lng_{row.key}">{row.lng}</span></td>
											<td><span id="status_{row.key}"><f:render partial="Localize/Icon" arguments="{ok: row.status}" /></span></td>
										</tr>
									</f:for>
									</tbody>
								</table>
							</div>
						</f:if>
					</div>
				</div>
			</f:then>
			<f:else>
				<div class="typo3-message message-notice">
					<div class="message-body">
						<f:translate key="be.localize.noTable" />
					</div>
				</div>
			</f:else>
		</f:if>
		</f:then>
		<f:else>
			<div class="typo3-message message-error">
				<div class="message-body">
					<f:format.html>
                        <f:translate key="be.localize.noConf" />
                    </f:format.html>
				</div>
			</div>
		</f:else>
	</f:if>
</f:section>