@extends('templates.captive')
@section('title','NewPortal Cautivo Netwey ')
@section('description','Portal Cautivo Netwey ')
@section('header')

@endsection

@section('styles')
	
@endsection

@section('content')		
	<div class="col-12 max-width text-center min-height-body">
				
		<h1 class="f-c-m f-blackit title-auto p-t-10 txt-upper">¡Bienvenido a Netwey!</h1>

		<p class="f-c-w f-regular f-s-19 l-s-1 p-t-10 msg-wellcome">
			Estamos listos para activar tu cuenta.
		</p>

		<img src="{{ asset('img/flecha.png') }}" style="width: 90px;">

		<form method="POST" id="form-activation" name="form-activation" action="{{ route('doActivationRetail') }}">
			@csrf
			<div id="register">
				<h3 class="f-c-m f-regular p-t-30" style="text-align: left;font-size: 22px;">
					Completa tus datos
				</h3>

				<div class="form-group">
					<input type="text" class="form-control form-control-sm input-landing" id="name" name="name" placeholder="Nombre*">
				</div>

				<div class="form-group">
					<input type="text" class="form-control form-control-sm input-landing" id="last_name" name="last_name" placeholder="Apellido*">
				</div>

				<div class="form-group">
					<input type="text" class="form-control form-control-sm input-landing" id="phone" name="phone" placeholder="Celular de contacto*">
				</div>
					<input type="hidden" id="email" name="email" value="">				
			</div>

			<div id="login" hidden>
				<div class="form-group p-t-30">
					<input type="text" class="form-control form-control-sm input-landing" id="dn" name="dn" placeholder="DN Netwey*">
				</div>

				<div class="form-group">
					<input type="password" class="form-control form-control-sm input-landing" id="password" name="password" placeholder="Contraseña*">
				</div>
			</div>
			
			<input type="hidden" id="msisdn" name="msisdn" value="{{ $msisdn }}">

			<div class="form-group cus-t">
				<h3 class="f-c-m f-regular" style="text-align: left;font-size: 22px;">
					Confirma tu direcci&oacute;n
				</h3>
				@php
					$address="";
					if(!empty($dataDn->address)){
						$address=$dataDn->address;
					}
				@endphp
				<input type="text" class="form-control form-control-sm input-landing" id="address" name="address" placeholder="Direccion donde vas a usar tu modem*" value="{{ $address }}"> 
				<span class="f-c-w f-blackit" id="t-t">?</span>
			</div>

			<div id="map" class="map-container" hidden>
				<div id="map-content"></div>
				
				<div class="adv-content">
					<div class="mesagger-coverage">
						<p class="mesagger-importan-coverage" style="margin: 0px;"> ADVERTENCIA </p>
						Gracias por ingresar tu dirección por favor verifica que el punto del mapa este situado en tu domicilio
						<strong class="read" data-toggle="modal" data-target="#exampleModalAdv"> Leer más...</strong>
					</div>
				</div>
			</div>

			<div class="text-center p-t-30">
				<button class="back-c-p btn-portal-v f-c-btn" type="submit">
					Activar
				</button>

				<a href="#" class="f-c-w f-medium" id="change-form" style="font-weight: bold;font-style: italic !important;">
					¿Ya tienes cuenta?
				</a>
			</div>

			<div class="col-md-12">
				<p class="f-c-w f-medium p-t-20 m-b-0" style="font-weight: bold; font-size: 22px;">
					¿Problemas con la activacion?
				</p>
				@include('layouts.common.section_contact')
			</div>
		</form>
	</div>

	<div class="modal fade" id="exampleModalAdv" tabindex="-1" role="dialog" aria-hidden="true">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<h5 class="modal-title" id="exampleModalLabel">Advertencia</h5>
						<button type="button" class="close" data-dismiss="modal" aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
					</div>

					<div class="modal-body" style="padding-left:15px;padding-right: 15px;text-align: justify;">

						<p>Gracias por ingresar tu dirección por favor verifica que el punto del mapa este situado en tu domicilio, recuerda que esta ubicación es donde podrás disfrutar del servicio NETWEY ya que nuestro servicio es exclusivamente de uso fijo y no debe de salir del domicilio registrado. En caso de que se intente utilizar el servicio en un domicilio distinto al solicitado y registrado, no podrás disfrutar de tu servicio o el mismo podrá ser suspendido sin responsabilidad para Netwey. </p>

					</div>

					<div class="modal-footer margin-right" style="text-align: right;">          
						<button style="background: #00D84D; border-color: #00D84D; color: black;" type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
					</div>
				</div> 
			</div>
		</div>

		<div class="modal fade act-success" id="successAct" tabindex="-1" role="dialog" data-backdrop="static">
			<div class="modal-dialog" role="document">
				<div class="modal-content back-c-pl">
					<div class="modal-body">
						<h1 class="f-c-w f-blackit title">
							¡Órale!
						</h1>

						<div class="emoticon-content">
							<img src="{{ asset('img/emoticon_star.png') }} " class="emoticon">
						</div>
					
						<p class="f-c-m f-medium txt1">
							Activaci&oacute;n Exitosa
						</p>

						<p class="f-c-w f-regular txt2">
							<!--Ya puedes disfrutar de tus servicio. <br>-->
							Tu activaci&oacute;n puede tardar hasta 5 minutos en ser efectiva, si quieres acelerar este proceso desconecta y vuelve a conectar tu modem
						</p>

						<a href="{{ env('URL_INFO') }}" class="back-c-p btn-portal-v f-c-btn text-center">
							Navegar
						</a>

						<a href="{{ env('URL_LANDING') }}#mi-netwey" class="back-c-p btn-portal-v f-c-btn text-center" style="margin-bottom: 50px">
							Registro Mi Netwey
						</a>
					</div>
				</div>
			</div>
		</div>

		<div class="modal fade act-success" id="errorAct" tabindex="-1" role="dialog" data-backdrop="static">
			<div class="modal-dialog" role="document">
				<div class="modal-content back-c-s">
					<div class="modal-body">
						<h1 class="f-c-w f-blackit title f-c-btn">
							¿Qu&eacute; crees?
						</h1>

						<div class="emoticon-content">
							<img src="{{ asset('img/sad_b.png') }} " class="emoticon">
						</div>
					
						<p class="f-c-w f-medium txt1">
							No pudimos activar tu Netwey
						</p>

						<p class="f-c-w f-regular txt3">
							Por favor entra en contacto con nosotros y te apoyamos
						</p>

						<div class="emoticon-content">
							<a href="https://wa.me/+525539511408" target="_blank">
								<img class="p-t-20 contact" src="{{ asset('img/wpp.png') }} ">
							</a>

							<p class="f-c-w f-regular p-t-10 txt4">chatea con nosotros</p>

							<a href="https://wa.me/+525539511408" class="f-c-w f-regular p-t-10" target="_blank">
								55 39511408
							</a>
						</div>

						<div class="emoticon-content">
							<a href="mailto:atencion@netwey.com.mx" target="_blank">
								<img class="p-t-20 contact" src="{{ asset('img/email_mod.png') }} ">
							</a>

							<a href="mailto:atencion@netwey.com.mx" class="mail">
								<p class="f-c-w f-regular p-t-10 txt4">
									env&iacute;anos un email: atencion@netwey.com.mx
								</p>
							</a>
						</div>

						<button data-dismiss="modal" aria-label="Close" class="back-c-p btn-portal-v f-c-btn text-center p-t-20" style="margin: 40px auto;">
							Aceptar
						</button>
					</div>
				</div>
			</div>
		</div>

@endsection

@section('scripts')	
	<script type="text/javascript">
		function handleError(err) {
			$('#preloader').hide();
			alert('Tu navegador no soporta geolocalización, por favor escribe la direccion donde estara tu Netwey.');
            console.warn('ERROR(' + err.code + '): ' + err.message);
        }

		function initPlaces(){
			var input = document.getElementById('address'),
		    	autocomplete = new google.maps.places.Autocomplete(input),
		    	geocoder = new google.maps.Geocoder,
		    	lat = 19.39068, 
		    	lng = -99.2836963;

		    var center = new google.maps.LatLng(lat, lng),
		    	  map = new google.maps.Map(document.getElementById('map-content'), {
							center,
							zoom: 5
						});

		    marker = new google.maps.Marker({
						map: map,
						draggable: true,
						animation: google.maps.Animation.DROP,
						icon: "{{ asset('img/point.png') }}",
						position: {lat: lat, lng: lng}
					});

			map.addListener('click', function(e) {
				marker.setPosition(e.latLng);
			    map.panTo(e.latLng);
			    
			    lat = marker.getPosition().lat();
			    lng = marker.getPosition().lng();

			    geocodeLatLng(lat, lng, geocoder, map, marker, true);
			});

			marker.addListener('dragend', function (event){
				lat = marker.getPosition().lat();
				lng = marker.getPosition().lng();

				geocodeLatLng(lat, lng, geocoder, map, marker, true);
			});	

			@if(empty($dataDn->address))
				geocodeLatLng(lat, lng, geocoder, map, marker, false);
			@else
				geocodeLatLng({{ $dataDn->lat }}, {{ $dataDn->lng }}, geocoder, map, marker, true);
			@endif

		    /*if(navigator.geolocation){
		    	navigator.geolocation.getCurrentPosition(function (e){
                    lng = e.coords.longitude;
                    lat = e.coords.latitude;

                    geocodeLatLng(lat, lng, geocoder, map, marker);
                },handleError, {maximumAge:0});
		    }else{
		    	alert('Tu navegador no soporta geolocalización, por favor escribe la direccion donde estara tu Netwey.');
		    	$('#preloader').hide();
		    }*/

		    google.maps.event.addListener(autocomplete, 'place_changed', function() {
		    	var place = autocomplete.getPlace();

		    	if(place.geometry){
		    		lat = place.geometry.location.lat();
			    	lng = place.geometry.location.lng();

			    	geocodeLatLng(lat, lng, geocoder, map, marker, true);
		    	}
		    });

		    $('#address').on('keypress', function(e){
    			if(e.which == 10 || e.which == 13){
    				var firstA = $('.pac-container').first().find('.pac-item-query').first().text();
    				firstA += ' ' + $('.pac-container').first().find('.pac-item-query').first().next().text();

	                $('#address').val(firstA);

	                getPositionByAddress(firstA, geocoder, map, marker);
	            }
    		});
		}

		function geocodeLatLng(lat,lng, geocoder, map, marker, ban) {
			var latlng = {lat:lat, lng: lng};

			geocoder.geocode({'location': latlng}, function(results, status) {
				$('#preloader').hide();
				if (status === 'OK') {
					if (results[0]){
						if(ban){
							$('#address').val(results[0].formatted_address);
							map.setZoom(16);
						}

						map.setCenter(latlng);
						marker.setPosition(latlng);

						$('#map').attr('hidden', null);
					}else{
						showMessage('No se encontro la dirección del punto marcado.','error','center');
					}
				}else{
					showMessage('Ocurrio un error cargando la dirección, por favor intente mas tarde.','error','center');
					console.log(status);
				}
			});
		}

		function getPositionByAddress(address, geocoder, map, marker){
			request = {
				query: address,
				fields: ['geometry']
	        }

            placeService = new google.maps.places.PlacesService(map);

            placeService.findPlaceFromQuery(request, function(results, status){
  				if (status == google.maps.places.PlacesServiceStatus.OK){
  					if(results && results[0]){
  						lat = results[0].geometry.location.lat();
	    				lng = results[0].geometry.location.lng();

	    				geocodeLatLng(lat, lng, geocoder, map, marker, true);
  					}
  				}
  			});
		}



		$(function () {
    		var validator = false;

    		function validLogin(){
    			validator = $('#form-activation').validate({
			        rules:{
						password:{
							required: true,
						},
						dn:{
							required: true,
							digits: true
						},
						address:{
							required: true,
						}
			        },
			        messages:{
			            password: {
			                required: "Debes escribir tu contraseña."
			            },
			            dn: {
			                required: "Debes escribir tu número de teléfono netwey.",
			                digits: "Escribe solo números"
			            },
			            address: {
			                required: "Debes seleccionar una dirección del listado."
			            }
			        }
			    });
    		}

    		function validReg(){
    			validator = $('#form-activation').validate({
			        rules:{
			            name:{
							required: true,
						},
						last_name:{
							required: true,
						},
						phone:{
							required: true,
							digits: true
						},
						address:{
							required: true,
						},
						email:{
							email: true
						},
						/*newPassword:{
							required: true,
						},
						newPasswordC:{
							equalTo: "#newPassword"
						}*/
			        },
			        messages:{
			            name: {
			                required: "Debes escribir tu nombre."
			            },
			            last_name: {
			                required: "Debes escribir tu apellido."
			            },
			            phone: {
			                required: "Debes escribir tu número de teléfono.",
			                digits: "Escribe solo números"
			            },
			            address: {
			                required: "Debes seleccionar una dirección del listado."
			            },
			            email:{
			            	email: "Debes escirbir un email válido"
			            },
			            /*newPassword:{
			            	required: "Debes escribir una contraseña."
			            },
			            newPasswordC:{
			            	equalTo: "Las contraseñas deben coincidir."
			            }*/
			        }
			    });
    		}

			$('#change-form').on('click', function(e){
				e.preventDefault();

				validator.destroy();

				if($('#login').attr('hidden')){
					$('#login').attr('hidden', null);
					$('#register').attr('hidden', true);
					$(e.currentTarget).text('Registrarme');
					validLogin();
				}else{
					$('#register').attr('hidden', null);
					$('#login').attr('hidden', true);
					$(e.currentTarget).text('¿Ya tienes cuenta?');
					validReg();
				}
				$('#form-activation input[name != address]').val('');
				$("html, body").animate({ scrollTop: 0 }, 600);
			});

			$('#form-activation').on('submit', function(e){
				if($('#form-activation').valid()){
					$('#preloader').show();
					return true;
				}
				else{
					e.preventDefault();
				}

				return false;
			});

			validReg();

			tippy('#t-t',{
				content: '<p style="margin:0px;">Puedes cambiar la ubicación</p> <p style="margin:0px;">donde va a estar tu Netwey</p>',
				animation: 'scale',
				duration: 0,
				arrow: true,
				placement: 'left',
				trigger: 'click'
			});

			@if($action == 'ACTIVATION_OK')
				$('#successAct').modal('show');
			@elseif($action == 'ACTIVATION_NOT_OK')
				$('#errorAct').modal('show');
			@endif			
		});

		@if($msga == 'NOT_SERV')
			showMessage('La dirección seleccionada no tiene cobertura.','error','center');	
		@elseif($msga == 'NOT_OK')
			showMessage('No se pudo procesar la activación, por favor intente de nuevo.','error','center');	
		@elseif($msga == 'INVALID_USER')
			showMessage('Usuario o contraseña inválidos.','error','center');	
		@endif

	</script>
@endsection