@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>
		
		<form method="POST" name="form-captcha" id="form-captcha" {{-- action="{{ route('home') }}?msisdn={{ session('dn') }}" --}}>
			@csrf
			<div class="captcha">
				<div class="form-group p-t-10">
					<label class="f-c-w f-regular">
						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" style="display: {{ $showError?'block':'none' }}">
						<p class="m-0">El Texto no coincide con el de la im&aacute;gen</p>
					</div>
				</div>
			</div>

			<button type="submit" class="back-c-p btn-portal-v f-c-btn" style="width: 280px !important; font-size: 16px !important;">
				Verificar estado de tu linea
			</button>
		</form>

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

@section('scripts')	
	<script type="text/javascript">
    	var refreshButton = document.querySelector(".refresh-captcha");
		
		refreshButton.onclick = function() {
			document.querySelector(".captcha-image").src = '{{ route('getCaptcha') }}?' + Date.now();;
		}

		$(function () {
			$('#form-captcha').on('submit', function(e){
				if($('#captcha').val().trim() == '' || $('#captcha').val().length != 5){
					$('#error-cap').show();
					e.preventDefault();
				}
				else
					$('#preloader').show();
			});
		});
    </script>
@endsection