@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">
		<p class="f-medium f-c-w f-s-17">
			Hola, {{ strtoupper($dataDn->name) }}
		</p>
		
		<h1 class="f-c-m f-blackit title p-t-10 txt-upper">¿A dónde te has ido?</h1>

		<p class="f-c-w f-regular f-s-19 l-s-1 p-t-30" style="margin: 0px 40px;">
			Tu navegación ha sido suspendida porque saliste de tu hogar.
		</p>

		<p class="f-c-w f-regular f-s-19 l-s-1 p-t-10" style="margin: 0px 40px;">
			Regresa a tu domicilio y haz click en este botón para reactivar tu cuenta. Si tu domicilio cambió, ponte en contacto con nosotros para ayudarte a actualizarlo.
		</p>
		<form name="do-reactivation" id="do-reactivation" id="do-reactivation" method="POST" action="{{ route('doReactivation') }}">
			@csrf
			<input type="hidden" name="msisdn" value="{{ $dataDn->msisdn }}">
			<input type="hidden" name="lng" id="lng" value="">
			<input type="hidden" name="lat" id="lat" value="">
			<div class="text-center p-t-30">
				<button type="button" class="back-c-p btn-portal-v f-c-btn" id="btn-reactivation">
					Reactivar
				</button>
				<button type="button" class="back-c-p btn-portal-v f-c-btn" id="btn-ubi">
					Ubicar
				</button>
			</div>
			<br>
			<div class="text-center f-c-m f-blackit title p-t-10 txt-upper" style="display: none;" id="divUbi">
				Latitud :<br>
				Logitud : 
			</div>
		</form>

		@include('layouts.common.section_contact')
		
	</div>
@endsection

@section('scripts')	
	<script type="text/javascript">
     $(function () {
        	//Mostrar mensajes que vienen por session desde el controlador. 
        	
        	@isset ($msg)
        	    showMessage("El sistema esta presentando problemas intenta más tarde.","{{ $type_msg }}",'center');
        	@endisset

        	$('#btn-reactivation').on('click', function(e){
        		e.preventDefault();
        		if (navigator.geolocation) {
	                navigator.geolocation.getCurrentPosition(function(position) {
	                    $('#lat').val(position.coords.latitude);
	                    $('#lng').val(position.coords.longitude);
	                    $('#do-reactivation').submit();
	                }, function() {
	                    showMessage('Debes dar permiso de gelocalización para ver los puntos de recargas.','error','center');
	                });
	            }else{
	                showMessage('Tu navegador no soporta gelocalización.','error','center');
	            }
        	});

        	$('#btn-ubi').on('click', function(e){
        		e.preventDefault();
        		if (navigator.geolocation) {
	                navigator.geolocation.getCurrentPosition(function(position) {
	                	var lat = position.coords.latitude;
	                	var lng = position.coords.longitude;
	                	$('#divUbi').html("<strong>Latitud :</strong> <span style = 'color:#fff;'>"+lat.toFixed(4)+"</span><br><strong>Longitud :</strong> <span style = 'color:#fff;'>"+lng.toFixed(4)+"</span>");
	                	$('#divUbi').show();
	                }, function() {
	                    showMessage('Debes dar permiso de gelocalización para reactivar tu Netwey.','error','center');
	                });
	            }else{
	                showMessage('Tu navegador no soporta gelocalización.','error','center');
	            }
        	});
        });	
    </script>
@endsection