@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">

		@if(isset($allowActivation) && $allowActivation && !empty($activate) )

			<img src="{{ asset('img/happy_face.png') }}" style="width: 60px;">
			<h1 class="f-c-m f-blackit title p-t-10 txt-upper">¡Bienvenido!</h1>

		@else

			<img src="{{ asset('img/notFound.png') }}" style="width: 60px;">
			<h1 class="f-c-m f-blackit title p-t-10 txt-upper">¡Ouch!</h1>
			
		@endif

		<p class="f-c-w f-regular f-s-19 l-s-1 p-t-30" style="margin: 0px 40px;">
			{{ $msg }}
		</p>

		@isset($allowActivation)
			@if($allowActivation)

				<br>
				<br>

				<div class="text-center f-c-m f-blackit title p-t-10 txt-upper">
					<button type="button" class="btn btn-info back-c-p btn-landing" data-toggle="modal" data-target="#modalActivation">Activar</button>
				</div>

			@endif
		@endisset

		<div class="text-center f-c-m f-blackit title p-t-10 txt-upper" style="display: none;" id="divUbi">
			Latitud :<br>
			Logitud : 
		</div>

	</div>

	@isset($allowActivation)
		@if($allowActivation)

			<div class="modal" id="modalActivation" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">

				<div class="modal-dialog">

					<div class="modal-content back-c-pl">

						<form method="POST" id="form-activation" name="form-activation" action="{{ route('activate') }}">

							<div class="modal-header">

								<h5 class="modal-title f-c-w">
									Activar DN <span id="popover_modal" type="button" data-toggle="popover" data-content="Se habilita el número de telefono para la navegación por internet">
										<i class="fas fa-info-circle"></i>
									</span>
								</h5>
								<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>

							</div>

							<div class="modal-body">

								@csrf

								<div class="form-group mb-3">

									<label for="order99min" class="f-c-w">
										N° de folio de activaci&oacute;n
									</label>
									<span class="f-c-w" id="popover_orden" type="button" data-toggle="popover" data-content="">
										<i class="fas fa-info-circle"></i>
									</span>
									<input type="text" class="form-control form-control-sm input-landing" id="order99min" name="order99min" placeholder="VOY-123456789012345" @isset($folio) value="{{ $folio }}" readonly @endisset>

								</div>
								
								<div class="form-group mb-3" @isset($folio) hidden @endisset>

									<label for="order99minConfirmation" class="f-c-w">Repetir N° de folio de activaci&oacute;n</label>
									<input type="text" class="form-control form-control-sm input-landing" id="order99minConfirmation" name="order99minConfirmation" placeholder="VOY-123456789012345">

								</div>

								<div class="form-group mb-3">

									<label for="floatingInput" class="f-c-w">N° de DN <span id="popover_dn" type="button" data-toggle="popover" data-content="">
										<i class="fas fa-info-circle"></i>
									</span></label>
									<input type="text" class="form-control form-control-sm input-landing" id="msisdn" name="msisdn" placeholder="N° de DN" @if(!isset($activate)) value="{{ $msisdn }}" readonly @endif>

								</div>

								<div class="form-group mb-3" @if(!isset($activate)) HIDDEN @endif>

									<label for="floatingInput" class="f-c-w">Repetir N° de DN</label>
									<input type="text" class="form-control form-control-sm input-landing" id="msisdnConfirmation" name="msisdnConfirmation" placeholder="Repetir N° de DN" @if(!isset($activate)) value="{{ $msisdn }}" readonly @endif>

								</div>

								<div class="captcha">

									<div class="form-group p-t-10">

										<label class="f-regular f-c-w">Escribe el texto de la im&aacute;gen</label>

										<input type="text" autocomplete="off" class="form-control form-control-sm input-landing" id="captcha" name="captcha">

										<div class="p-t-10">

											<img src="{{ route('getCaptcha') }}" alt="CAPTCHA" class="captcha-image">
											<i class="fas fa-redo refresh-captcha"></i>

										</div>

										<div class="alert alert-danger" id="error-cap">
											<p class="m-0" id="error-cap-message">Es necesario ingresar el texto para validar la imagen</p>
										</div>

									</div>

								</div>

							</div>

							<div class="modal-footer">

								<button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
								<input type="submit" class="btn btn-primary back-c-p" style="color: #000; font-weight: 800;"value="Activar">

							</div>

						</form>

					</div>

				</div>

			</div>

		@endif
	@endisset

@endsection

@section('scripts')

	<script type="text/javascript">

        $(function () {

			@isset($allowActivation)
				@if($allowActivation)

		        	$("#popover_modal").popover();
		        	$("#popover_orden").popover({
		        		html: true,
		        		content: function () {
		        			return '<p>Este número lo encontrarás en el correo recibido por la compra de tu modem.</p>' +
		        				'<img style="width: 250px;" src="{{ asset("img/help_orden.png") }}" />';
		        		}
		        	});
		        	$("#popover_dn").popover({
		        		html: true,
		        		content: function () {
		        			return '<p>El DN lo encontrarás la etiqueta adhesiva con seriales en el modem.</p>' +
		        				'<img style="width: 250px;" src="{{ asset("img/help_dn.png") }}" />';
		        		}
		        	});

		        	$('#popover_modal').on('shown.bs.popover', function () {
		        		$("#popover_orden").popover('hide');
		        		$("#popover_dn").popover('hide');
					});
		        	$('#popover_orden').on('shown.bs.popover', function () {
		        		$("#popover_modal").popover('hide');
		        		$("#popover_dn").popover('hide');
					});
		        	$('#popover_dn').on('shown.bs.popover', function () {
		        		$("#popover_orden").popover('hide');
		        		$("#popover_modal").popover('hide');
					});

		        	$("[data-toggle=popover]").css('cursor','pointer');

		        	$('body').on('click',function(e){
					    //console.log($(e.target).parent())
					    if($(e.target).parent().data('toggle') != 'popover'){
					        $("[data-toggle=popover]").popover('hide');
					    }
					})

					$('#error-cap').hide();

			    	var refreshButton = document.querySelector(".refresh-captcha");

					refreshButton.onclick = function() {
						document.querySelector(".captcha-image").src = '{{ route('getCaptcha') }}?' + Date.now();;
					}

					@if(!env('APP_DEBUG', false))

						$('#msisdnConfirmation').bind("cut copy paste", function(e) {
							e.preventDefault();
						});

						$('#msisdn').bind("cut copy paste", function(e) {
							e.preventDefault();
						});

						$('#order99min').bind("cut copy paste", function(e) {
							e.preventDefault();
						});

					@endif

					$('#form-activation').on('submit', function(e) {

						doActivation(e);

					});

				@endif
			@endisset

        	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 ver los puntos de recargas.','error','center');

                });
            else
                showMessage('Tu navegador no soporta gelocalización.','error','center');

        });

		@isset($allowActivation)
			@if($allowActivation)

				function resetActivationForm () {

					$('#msisdn').val('');
					$('#msisdnConfirmation').val('');
					$('#order99min').val('');
					$('#order99minConfirmation').val('');
		        	$('#captcha').val('');
			        $('#error-cap').hide();

				}

		        function doActivation (e) {
					
					$('#error-cap').hide();
					@if( !empty($activate) )
						$('#order99minConfirmation').val( $('#order99min').val() );
					@endif

		        	let msisdnView = $('#msisdn'),
		        		msisdnConfirmationView = $('#msisdnConfirmation'),
		        		order99minView = $('#order99min'),
		        		confirmationView = $('#order99minConfirmation'),
		        		captchaView = $('#captcha'),
		        		pointerLoader = $('#preloader'),
		        		errorCap = $('#error-cap');

		        	let msisdn = msisdnView.val().trim(),
		        		msisdnConfirmation = msisdnConfirmationView.val().trim(),
		        		order99min = order99minView.val().trim(),
		        		confirmation = confirmationView.val().trim(),
		        		captcha = captchaView.val().trim();

					if (captcha == '' || captcha.length != 5 || msisdn == '' || msisdnConfirmation == '' || msisdnConfirmation != msisdn || order99min == '' || confirmation == '' || msisdnConfirmation.length > 10 || msisdn.length > 10 || msisdnConfirmation.length < 10 || msisdn.length < 10 ) 
					{
						let errorMessage = $('#error-cap-message');

						if (captcha.length != 5){
							errorMessage.html('El texto tiene que ser de exactamente 5 caracteres sin espacios en blanco');
						}

						if (captcha.length == 0 ){
							errorMessage.html('Es necesario ingresar el texto para validar la imagen');
						}

						if (msisdnConfirmation == ''){
							@if(!isset($activate))
								errorMessage.html('No se pudo detectar la repetición del N° de DN');
							@else
								errorMessage.html('Debe repetir el N° de DN');
							@endif
						}

						if (msisdn != msisdnConfirmation ){
							errorMessage.html('La Confirmación del N° de DN no coincide con el N° de DN');
						}

						if (msisdn == ''){
							@if(!isset($activate))
								errorMessage.html('No se pudo detectar el de N° de DN');
							@else
								errorMessage.html('Debe ingresar su N° de DN');
							@endif
						}

						if (confirmation != order99min){
							errorMessage.html('La Confirmación debe coincidir con el N° de orden de paquetería');
						}

						if (confirmation == ''){
							errorMessage.html('Debe repetir el N° de orden de paquetería');
						}

						if (order99min == ''){
							errorMessage.html('Debe ingresar el N° de orden de paquetería');
						}

						if ( msisdn.length > 10 || msisdn.length < 10 ){
							errorMessage.html('El DN debe contener 10 digitos.');
						}

						if ( msisdnConfirmation.length > 10 || msisdnConfirmation.length < 10  ){
							errorMessage.html('La confirmacion del DN debe contener 10 digitos.');
						}


						errorCap.show();
						e.preventDefault();

						return false;

					} else {

						pointerLoader.show();
						return true;

					}

		        }

			@endif
		@endisset

    </script>

@endsection