{namespace v=FluidTYPO3\Vhs\ViewHelpers}
{v:variable.typoscript(path: 'plugin.ncn_template.settings') -> v:variable.set(name: 'settings')}
{v:variable.typoscript(path: 'config') -> v:variable.set(name: 'config')}

<f:layout name="Default" />

	<f:section name="main">
	<div class="dealermap d-none">
		<div id="dealermap"></div>
	</div>
	<f:if condition="{dealers->f:count()} > 0">
	<f:then>
	<section class="dealerresults-wrapper mt-5 mb-3 container">

			<h1 class="text-center">RivieraPool Händler <f:translate key="dealersearch.forperson" extensionName="ncn_rivierapool_template"/> {zip} {city}, {countryname}</h1>

			<div class="dealerresults row mt-5">
			
				
				<f:for each="{dealers}" as="dealer" iteration="i">
					<v:variable.set name="isPostcodeProtection" value="0" />
					<f:for each="{dealer.postcodes}" as="postcode">
						
						<f:if condition="{zip} >= {postcode.zipStart}  && {zip} <= {postcode.zipEnd} && {country} == {postcode.country}">
							<v:variable.set name="isPostcodeProtection" value="1" />
						</f:if>
					</f:for>

					
					<div class="col-md-4 mb-4 {f:if(condition:'{dealer.isProPartner} == 1',then:'active order-first',else:'')}" data-name="{dealer.dealerDisplayName}" data-lat="{dealer.latitude}" data-lng="{dealer.longitude}" data-uid="{dealer.uid}">
						<div class="card mb-4 h-100 {f:if(condition:'{dealer.isProPartner} == 1',then:'bg-lighter ',else:'')} {f:if(condition:'{isPostcodeProtection}',then:'border-danger ',else:'')}">
							
							<div class="card-body">
							<div class="marker" style="background-image: url(/typo3conf/ext/ncn_dealersearch/Resources/Public/Icons/dealer-icon-{i.cycle}_dark.png)"></div>
							<f:if condition="{isPostcodeProtection} && {dealer.isProPartner}">
								<div class="badge badge-danger mb-4 w-100 py-3 font-weight-bolder">ProPartner mit PLZ-Schutz</div><br>
							</f:if>	
							<f:if condition="!{isPostcodeProtection} && {dealer.isProPartner}">
								<div class="badge badge-outline-secondary mb-4 w-100 py-3 font-weight-bolder">RivieraPool ProPartner</div><br>
							</f:if>	
							<div class="dealerinfo">
								<f:if condition="{settings.gvlMode}">
										<f:then>
										
										<div class="row">
											<div class="col-7">
													<b>{dealer.company}</b><br><span class="text-muted">{dealer.usergroup.0.title}</span><br />
													{dealer.firstName} {dealer.lastName} ({dealer.username})
													<hr />
													{dealer.address}<br>
													{dealer.zip} {dealer.city}, {dealer.country}<br>
													<br>
													<f:if condition="{dealer.telephone}">
													Telefon: {dealer.telephone}<br>
													</f:if>
													<f:if condition="{dealer.mobile}">
													Mobil: {dealer.mobile}<br>
													</f:if>
													<f:if condition="{dealer.email}">
													E-Mail: {dealer.email}<br>
													</f:if>
													<f:if condition="{dealer.www}">
														<br>
													<a href="{dealer.www}/" target="_blank">{dealer.www}</a><br>
													</f:if>			
											</div>
											<div class="col-5">
													<div class="distance badge badge-primary mb-4"><i class="fas fa-car-side"></i> <f:format.number decimals="2" decimalSeparator="{f:translate(key: 'dealersearch.decimalseparator', extensionName: 'ncn_rivierapool_template')}" thousandsSeparator="{f:translate(key: 'dealersearch.thousandsseparator', extensionName: 'ncn_rivierapool_template')}">{dealer.distance}</f:format.number> km</div>
																		<br>
																		
													<f:if condition="{dealer.logo}">
														Logo:<br>
															<f:image image="{dealer.logo}" width="200" />
													</f:if>
													<f:if condition="{dealer.image}">
														<div class="mt-3">
															Profil:<br>
															<f:image image="{dealer.image.0}" width="200" />
														</div>
													</f:if>
											</div>
										</div>

										<hr />
										<span class="text-muted">
										Letzter Login: <f:format.date format="d.m.Y H:i">{dealer.lastlogin}</f:format.date> Uhr<br>
										GVL: {dealer.gvl.name}
										</span>
							
										</f:then>
										<f:else>

											<strong>
													<f:if condition="{dealer.isProPartner}">
														<f:then>
															{dealer.dealerDisplayName}
														</f:then>
														<f:else>
															RivieraPool Partner <f:translate key="dealersearch.incity" extensionName="ncn_rivierapool_template"/> {dealer.city}
														</f:else>
													</f:if>
												</strong><br>
												{dealer.zip} {dealer.city}
										</f:else>
								</f:if>
<!--
								<div class="actions">
									<f:if condition="{dealer.portraitPid} > 0">
										<f:then>
											<f:link.page pageUid="{dealer.portraitPid}" target="_blank" rel="nofollow" class="button small secondary"><i class="ion-arrow-graph-up-right"></i> <f:translate key="dealersearch.showportrait"  extensionName="ncn_rivierapool_template"/></f:link.page><br>
										</f:then>
										<f:else>
											<a href="javascript:void(0);" class="button small hollow"><i class="ion-plus"></i> <f:translate key="dealersearch.contact" extensionName="ncn_rivierapool_template"/></a>
										</f:else>
									</f:if>
								</div>
								-->
							</div>
							</div>
						</div>

					</div>
				</f:for>
			</div>

			<div id="contactform">
				<!--<a onclick="$('#contactform').slideUp(400).removeClass('active');" class="close"><i class="ion-ios-close-empty" aria-hidden="true"></i></a>-->
				<f:for each="{dealers}" as="dealer" iteration="i">
					<div class="overlay-result" data-uid="{dealer.uid}" style="{f:if(condition:'{dealer.isProPartner} == 1',then:'',else:'display:none;')}">
						<f:render section="contactform" arguments="{dealer: dealer, gvl: dealer.gvl}"/>
					</div>
				</f:for>

			</div>
	</section>
	</f:then>

	<f:else>
		<f:comment>Keine Händler Gefunden => Export anzeigen</f:comment>
		<section class="dealerresults-wrapper">
			<h1 class="text-center">RivieraPool Händler <f:translate key="dealersearch.forperson" extensionName="ncn_rivierapool_template"/> {zip} {city}, {countryname}</h1>
			<div id="contactform">
				<f:render section="contactform" arguments="{gvl: defaultgvl}" />
			</div>
		</section>
	</f:else>
	</f:if>
	<style>
	.tx-ncn-dealersearch #dealermap{
		height: 450px;
	}
	/*
	.ce > .dealercontactform{
		display: none;
	}
	*/
	.tx-ncn-dealersearch #contactform{

		bottom: 0;
		width: 100%;
		padding-bottom: 0;
	}
	</style>

	<script type="text/javascript">
		function initDealerMap() {
			userLat = <f:format.number decimals="8" decimalSeparator=".">{lat}</f:format.number>;
			userLng = <f:format.number decimals="8" decimalSeparator=".">{lng}</f:format.number>;


			var map = new google.maps.Map(document.getElementById('dealermap'), {
				zoom: 4,
				center: {lat: userLat, lng: userLng},
				mapTypeControl: false,
			});

			var labelIndex = 0;
			var bounds = new google.maps.LatLngBounds();

			//var userMarkerIcon = MapIconMaker.createMarkerIcon({width: 20, height: 34, primaryColor: "#0000FF", cornercolor:"#0000FF"});

			var userMarker = new google.maps.Marker({
			    position: {lat: userLat, lng: userLng},
			    map: map,
			    animation: google.maps.Animation.DROP,
  				icon: '/typo3conf/ext/ncn_dealersearch/Resources/Public/Icons/marker-icon.png'
			});
			bounds.extend(userMarker.getPosition());

			$(".dealerresults > *").each(function(){

				var lat = $(this).data('lat');
				var lng = $(this).data('lng');

				var latlng = {lat: lat, lng: lng};
				var marker = new google.maps.Marker({
				    position: latlng,
				    map: map,
				    title: $(this).data('name'),
				    animation: google.maps.Animation.DROP,
				    uid: $(this).data('uid'),
  					icon: '/typo3conf/ext/ncn_dealersearch/Resources/Public/Icons/dealer-icon-'+(++labelIndex)+'_dark.png'
				});

				bounds.extend(marker.getPosition());

				marker.addListener('click', function() {
					if(this.uid > 0){
			    		$(".dealerresults [data-uid="+this.uid+"]").click();
			    	}

			  	});

			});



			google.maps.event.addListenerOnce(map, 'bounds_changed', function(event) {
			  this.setZoom(map.getZoom());
			  if (this.getZoom() > 10) {
			    this.setZoom(10);
			  }
			});
			map.fitBounds(bounds);
		}

		$(document).ready(function() {
			if($('.dealerresults > *').length > 0){
				//$( "#contactform" ).slideUp(0);
			}

			//$(".dealercontactform").detach().appendTo('#contactformcontainer');
		});

		$( ".dealerresults > *" ).click(function() {
			if($(this).hasClass('active')){

				$( "#contactform" ).slideUp(400);
				$(this).removeClass('active');
				return;
			}

			var dealerId = $(this).data('uid');
			$(this).addClass('active');
	    	// Active Klasse
	    	$(".dealerresults > *:not([data-uid="+dealerId+"])").removeClass('active');

			$("#contactform").slideUp(400);
			$("#contactform").promise().done(function(){
			    // GVL Ein/Ausblenden
	    		$(".overlay-result:not([data-uid="+dealerId+"])").hide();
	    		$(".overlay-result[data-uid="+dealerId+"]").show();



				// Formular togglen
				$( "#contactform" ).slideDown(400);
			});


		});
	</script>
	<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBVb_um4v67e7aPfHvw9-D9N5M470pg9Z0&callback=initDealerMap"></script>

</f:section>

<f:section name="contactform">
	<section class="d-none blue text-center">
		<f:if condition="{dealer.isProPartner} == 1">
			<f:then>
				<div class="row">
					<div class="large-12 large-offset-2 columns">
						<h4 class="text-center">Unsere Empfehlung für Sie:</h4>
						<div class="item">

							<h2 class="text-center">{dealer.dealerDisplayName} </h2>
							<f:image src="/fileadmin/user_upload/rp-portraits-logo-negativ.png"title="{dealer.dealerDisplayName}" alt="{dealer.dealerDisplayName}" treatIdAsReference="TRUE" width="220c" />
							<ul class="button-group round">
								<li><f:link.page rel="nofollow" pageUid="2748" additionalParams="{tx_powermail_pi1: {field: {haendler-herkunft: dealer.company}}}" class="button secondary round"><i class="ion-paper-airplane"></i> <f:translate key="dealersearch.sendinfo" extensionName="ncn_rivierapool_template"/></f:link.page></li>
								<f:if condition="{dealer.portraitPid}"><li><f:link.page pageUid="{dealer.portraitPid}" target="_blank" class="button  round"><i class="ion-arrow-graph-up-right"></i> <f:translate key="dealersearch.showportrait"  extensionName="ncn_rivierapool_template"/></f:link.page></li></f:if>
								<li><f:link.page rel="nofollow" pageUid="449" additionalParams="{tx_powermail_pi1: {field: {haendler-herkunft: dealer.company}}}" class="button secondary round"><i class="ion-ios-telephone"></i> <f:translate key="dealersearch.returncall" extensionName="ncn_rivierapool_template"/></f:link.page></li>
							</ul><br />
							<div class="row">
								<div class="medium-8 text-right columns">
									<div class="">
										<f:image class="round" src="/fileadmin/user_upload/partnerportal/portraits/{dealer.username}.jpg" title="{dealer.dealerDisplayName}" alt="{dealer.dealerDisplayName}" height="200c" treatIdAsReference="TRUE" width="200c" />
									</div>
								</div>
								<div class="medium-8 text-left columns" style="position:relative;min-height: 200px;">
									<div class="vCenter">
										<h3><b>{dealer.name}</b><br /></h3>
										<p>
											<f:if condition="{dealer.telephone}"><i class="ion-ios-telephone"></i> {dealer.telephone}<br /></f:if>
											<a href="mailto:{gvl.email}" ><i class="ion-ios-email"></i> {dealer.email}</a>
										</p>
									</div>
								</div>
							</div>
							<p class="lead text-center bubble">Wir bauen Schwimmbad-, Whirlpool- sowie Saunaanlagen im qualitativ hochwertigen Segment. Unsere Mitarbeiter sind teilweise seit mehr als 35 Jahren im Wellnessbereich tätig.<br /><small>{dealer.name}</small></p>
						</div>

					</div>
				</div>

			</f:then>
			<f:else>
				<div class="row">
					<div class="large-12 large-offset-2 columns">
						<h4 class="text-center">Kontakt anfrage:</h4>
						<div class="item">
							<h2 class="text-center">RivieraPool Partner <f:translate key="dealersearch.incity" extensionName="ncn_rivierapool_template"/> {dealer.city} {countryname}</h2>
							<ul class="button-group round">
								<li><f:link.page rel="nofollow" pageUid="2748" additionalParams="{tx_powermail_pi1: {field: {haendler-herkunft: dealer.company}}}" class="button secondary round"><i class="ion-paper-airplane"></i> <f:translate key="dealersearch.sendinfo" extensionName="ncn_rivierapool_template"/></f:link.page></li>
								<li><f:link.page rel="nofollow" pageUid="449" additionalParams="{tx_powermail_pi1: {field: {haendler-herkunft: dealer.company}}}" class="button secondary round"><i class="ion-ios-telephone"></i> <f:translate key="dealersearch.returncall" extensionName="ncn_rivierapool_template"/></f:link.page></li>
							</ul><br />
							<div class="row">
								<div class="medium-8 text-right columns">
									<div class="">
										<f:image class="round" src="{gvl.image.uid}" width="200c" height="200c" treatIdAsReference="TRUE" />
									</div>
								</div>
								<div class="medium-8 text-left columns" style="position:relative;min-height: 200px;">
									<div class="vCenter">
										<h3><b>{gvl.name}</b><br />{gvl.subline}</h3>
										<p>
											<f:if condition="{dealer.telephone}"><i class="ion-ios-telephone"></i> {gvl.phone}<br /></f:if>
											<a href="mailto:{gvl.email}" ><i class="ion-ios-email"></i> {gvl.email}</a>
										</p>
									</div>
								</div>
							</div>
							<p class="lead text-center bubble"><f:format.nl2br>{gvl.infoText}</f:format.nl2br><br /><small>{gvl.name}</small></p>
						</div>

					</div>
				</div>

			</f:else>
		</f:if>
	</section>
	<div id="contactformcontainer" class="d-none">
		<section class="white">
			<div class="row">
				<div class="large-14 large-offset-1 columns">
					<div class="csc-frame-indent">
						<div class="csc-frame-indent">
							<h2 class="text-center">
								Weitere Produktinformationen
							</h2>
							<p class="text-center">Weltweit sind in privaten Gärten und Hallenbädern, in Hotels, kommunalen Freizeitbädern und Sportcentern bislang mehr als 10.000 Schwimmbecken und Whirlpools der Marke RivieraPool installiert worden. Den Einbau und Vor-Ort-Service übernehmen zertifizierte Fachhändler. Die Auslieferung der Pools übernimmt der Hersteller selbst, dafür steht dem Unternehmen ein Fuhrpark mit sieben Spezialfahrzeugen zur Verfügung. </p>
						</div>
						<hr />
						<h4 class="text-center">Weitere Informationen zu RivieraPool Produkte erhalten Sie hier: </h4>
						<hr />
						<div class="row">
							<div class="large-5 column">
								<f:link.page rel="nofollow" pageUid="2598" additionalParams="{tx_powermail_pi1: {field: {haendler-herkunft: dealer.company}}}" class="button round secondary expand"><i class="ion-images"></i> <f:translate key="dealersearch.brochuresandpricelists" extensionName="ncn_rivierapool_template"/></f:link.page>
							</div>
							<div class="large-6 column">
								<f:link.page rel="nofollow" pageUid="449" target="popup" additionalParams="{tx_powermail_pi1: {field: {haendler-herkunft: dealer.company}}}" class="button secondary round expand"><i class="ion-map"></i> Pool-Ausstellungen in der Nähe</f:link.page>
							</div>
							<div class="large-5 column">
								<f:link.page rel="nofollow" pageUid="2604" additionalParams="{tx_powermail_pi1: {field: {haendler-herkunft: dealer.company}}}" class="button round secondary expand"><i class="ion-gear-b"></i> Pool-Konfigurator starten</f:link.page>
							</div>
						</div>
					</div>

				</div>
			</div>
		</section>
	</div>
</f:section>