{*+**********************************************************************************
* The contents of this file are subject to the vtiger CRM Public License Version 1.1
* ("License"); You may not use this file except in compliance with the License
* The Original Code is: vtiger CRM Open Source
* The Initial Developer of the Original Code is vtiger.
* Portions created by vtiger are Copyright (C) vtiger.
* All Rights Reserved.
************************************************************************************}
{* modules/Users/views/Login.php *}

{strip}
	<style>
		body {
			background: url(layouts/v7/resources/Images/Inicio.jpg);
			background-position: center;
			background-size: cover;
			width: 100%;
			height: 96%;
			background-repeat: no-repeat;
		}
		hr {
			margin-top: 15px;
			background-color: #7C7C7C;
			height: 2px;
			border-width: 0;
		}
		h3, h4 {
			margin-top: 0px;
		}
		hgroup {
			text-align:center;
			margin-top: 4em;
		}
		input {
			font-size: 16px;
			-webkit-appearance: none;
			display: block;
			color: #FFF !important;
			width: 100%;
			border: none;
			border-radius: 0;
			font-weight: bold !important;
			background: transparent !important;
		}
		input:focus {
			outline: none;
		}
		label {
			font-size: 16px;
			pointer-events: none;
			top: 10px;
			transition: all 0.2s ease;
			color: #fff;
			font-weight: 777;
		}
		input:focus ~ label, input.used ~ label {
			top: -20px;
			transform: scale(.75);
			left: -12px;
			font-size: 18px;
		}
		input:focus ~ .bar:before, input:focus ~ .bar:after {
			width: 50%;
		}
		#page {
			padding-top: 6%;
		}
		.widgetHeight {
			height: 410px;
			margin-top: 20px !important;
		}
		.loginDiv {
			width: 480px;
			margin: 0 auto;
			border-radius: 4px;
			box-shadow: 0 0 10px gray;
			background-color: rgb(0,0,0,0.8);
			/*opacity: 0.73;*/
		}
		.marketingDiv {
			color: #303030;
		}
		.separatorDiv {
			background-color: #7C7C7C;
			width: 2px;
			height: 460px;
			margin-left: 20px;
		}
		.user-logo {
			height: 110px;
			margin: 0 auto;
			padding-top: 40px;
			padding-bottom: 20px;
		}
		.blockLink {
			border: 1px solid #303030;
			padding: 3px 5px;
		}
		.group {
			position: relative;
			margin: 20px 20px 40px;
		}
		.failureMessage {
			color: red;
			display: block;
			text-align: center;
			padding: 0px 0px 10px;
		}
		.successMessage {
			color: green;
			display: block;
			text-align: center;
			padding: 0px 0px 10px;
		}
		.inActiveImgDiv {
			padding: 5px;
			text-align: center;
			margin: 30px 0px;
		}
		.app-footer p {
			margin-top: 0px;
		}
		.footer {
			background-color: #fbfbfb;
			height:26px;
		}
		.bar {
			position: relative;
			display: block;
			width: 100%;
		}
		.bar:before, .bar:after {
			content: '';
			width: 0;
			bottom: 1px;
			position: absolute;
			height: 1px;
			background: #35aa47;
			transition: all 0.2s ease;
		}
		.bar:before {
			left: 50%;
		}
		.bar:after {
			right: 50%;
		}
		.button {
			position: relative;
			display: inline-block;
			padding: 9px;
			margin: .3em 0 1em 0;
			width: 70%;
			font-weight: 777;
			vertical-align: middle;
			color: rgb(255,255,255);
			font-size: 20px;
			line-height: 30px;
			-webkit-font-smoothing: antialiased;
			text-align: center;
			letter-spacing: 1px;
			background: transparent;
			border: 0;
			cursor: pointer;
			transition: all 0.15s ease;
			border: 1px solid #fff;
			border-radius: 0.8em;
		}
		.button:focus {
			outline: 0;
		}

		.ripples {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			overflow: hidden;
			background: transparent;
		}

		/*Animations*/
		@keyframes inputHighlighter {
			from {
				background: #4a89dc;
			}
			to 	{
				width: 0;
				background: transparent;
			}
		}
		@keyframes ripples {
			0% {
				opacity: 0;
			}
			25% {
				opacity: 1;
			}
			100% {
				width: 200%;
				padding-bottom: 200%;
				opacity: 0;
			}
		}
	</style>

	<span class="app-nav"></span>
	<div class="col-lg-12">
		<div class="col-lg-3">
		</div>
		<div class="col-lg-5">
			<div class="loginDiv widgetHeight">
				<img class="img-responsive user-logo" src="layouts/v7/resources/Images/vtiger.png">
				<h6 class="text-center" style="color: #fff"><b>TOTAL Servicios Financieros</b></h6>
				<div>
					<span class="{if !$ERROR}hide{/if} failureMessage" id="validationMessage">{$MESSAGE}</span>
					<span class="{if !$MAIL_STATUS}hide{/if} successMessage">{$MESSAGE}</span>
				</div>

				<div id="loginFormDiv" style="margin-top:35px;">
					<form class="form-horizontal" method="POST" id="loginForm" action="index.php">
						<input type="hidden" name="module" value="Users"/>
						<input type="hidden" name="action" value="Login"/>

						<div class="form-group" style="margin-left:10px">
                            <label for="username" class="col-md-3 col-form-label text-right" style="padding-right: 0px">USUARIO: </label>
                            <div class="col-md-8">
                            	<input id="username" type="text" name="username" placeholder="Usuario" class="form-control" autofocus>
                            </div>
                        </div>

                        <div class="form-group" style="margin-left:10px">
                            <label for="password" class="col-md-3 col-form-label text-right" style="padding-right: 0px">CONTRASEÑA: </label>
                            <div class="col-md-8">
                            	<input id="password" type="password" name="password" placeholder="Contraseña" class="form-control">
                            </div>
                        </div>

						<div class="group text-center">
							<button type="submit" class="button buttonBlue g-recaptcha" data-sitekey="6LehXnseAAAAAFB6Jf7I8PL_Fvu7ZwbmNaE81o3C" data-callback='onSubmit' data-action='submit'>INGRESAR</button><br>
							<a class="forgotPasswordLink" style="color: rgb(191,61,31);font-size:14px">He olvidado mi contraseña</a>
						</div>
					</form>
				</div>

				<div id="forgotPasswordDiv" class="hide" style="margin-top:35px;">
					<form class="form-horizontal" action="forgotPassword.php" method="POST">
						<div class="form-group" style="margin-left:10px">
							<label for="fusername" class="col-md-3 col-form-label text-right" style="padding-right: 0px">USUARIO: </label>
							<div class="col-md-8">
								<input id="fusername" type="text" name="username" placeholder="Usuario" class="form-control">
							</div>
						</div>
						<div class="form-group" style="margin-left:10px">
							<label for="email" class="col-md-3 col-form-label text-right" style="padding-right: 0px">EMAIL: </label>
							<div class="col-md-8">
								<input id="email" type="email" name="emailId" placeholder="Email" class="form-control">
							</div>
						</div>
						<div class="group text-center">
							<button type="submit" class="button buttonBlue forgot-submit-btn">Enviar</button><br>
							<span style="color: rgb(247 190 0)">Por favor ingrese los detalles y envíe<a class="forgotPasswordLink pull-right" style="color: rgb(191,61,31);font-size:14px">Atrás</a></span>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
		<script src="https://www.google.com/recaptcha/api.js"></script>

		<script>
			function onSubmit(token) {
				var password = jQuery('#password').val();
				if(password)
				{
					let encodedPassword = rot13(btoa(password));
					jQuery('#password').val(encodedPassword);
				}

				document.getElementById("loginForm").submit();
			}

			function rot13(str) {
				var input     = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
				var output    = 'NOPQRSTUVWXYZABCDEFGHIJKLMnopqrstuvwxyzabcdefghijklm';
				var index     = x => input.indexOf(x);
				var translate = x => index(x) > -1 ? output[index(x)] : x;
				return str.split('').map(translate).join('');
			}
		</script>

		<script>
			jQuery(document).ready(function () {
				var validationMessage = jQuery('#validationMessage');
				var forgotPasswordDiv = jQuery('#forgotPasswordDiv');

				var loginFormDiv = jQuery('#loginFormDiv');
				loginFormDiv.find('#password').focus();

				loginFormDiv.find('a').click(function () {
					loginFormDiv.toggleClass('hide');
					forgotPasswordDiv.toggleClass('hide');
					validationMessage.addClass('hide');
				});

				forgotPasswordDiv.find('a').click(function () {
					loginFormDiv.toggleClass('hide');
					forgotPasswordDiv.toggleClass('hide');
					validationMessage.addClass('hide');
				});

				loginFormDiv.find('button').on('click', function () {
					var username = loginFormDiv.find('#username').val();
					var password = jQuery('#password').val();
					var result = true;
					var errorMessage = '';
					if (username === '') {
						errorMessage = 'Please enter valid username';
						result = false;
					} else if (password === '') {
						errorMessage = 'Please enter valid password';
						result = false;
					}
					if (errorMessage) {
						validationMessage.removeClass('hide').text(errorMessage);
					}
					return result;
				});

				forgotPasswordDiv.find('button').on('click', function () {
					var username = jQuery('#forgotPasswordDiv #fusername').val();
					var email = jQuery('#email').val();

					var email1 = email.replace(/^\s+/, '').replace(/\s+$/, '');
					var emailFilter = /^[^@]+@[^@.]+\.[^@]*\w\w$/;
					var illegalChars = /[\(\)\<\>\,\;\:\\\"\[\]]/;

					var result = true;
					var errorMessage = '';
					if (username === '') {
						errorMessage = 'Please enter valid username';
						result = false;
					} else if (!emailFilter.test(email1) || email == '') {
						errorMessage = 'Please enter valid email address';
						result = false;
					} else if (email.match(illegalChars)) {
						errorMessage = 'The email address contains illegal characters.';
						result = false;
					}
					if (errorMessage) {
						validationMessage.removeClass('hide').text(errorMessage);
					}
					return result;
				});
				jQuery('input').blur(function (e) {
					var currentElement = jQuery(e.currentTarget);
					if (currentElement.val()) {
						currentElement.addClass('used');
					} else {
						currentElement.removeClass('used');
					}
				});

				var ripples = jQuery('.ripples');
				ripples.on('click.Ripples', function (e) {
					jQuery(e.currentTarget).addClass('is-active');
				});

				ripples.on('animationend webkitAnimationEnd mozAnimationEnd oanimationend MSAnimationEnd', function (e) {
					jQuery(e.currentTarget).removeClass('is-active');
				});
				loginFormDiv.find('#username').focus();

				var slider = jQuery('.bxslider').bxSlider({
					auto: true,
					pause: 4000,
					nextText: "",
					prevText: "",
					autoHover: true
				});
				jQuery('.bx-prev, .bx-next, .bx-pager-item').live('click',function(){ slider.startAuto(); });
				jQuery('.bx-wrapper .bx-viewport').css('background-color', 'transparent');
				jQuery('.bx-wrapper .bxslider li').css('text-align', 'left');
				jQuery('.bx-wrapper .bx-pager').css('bottom', '-15px');

				var params = {
					theme		: 'dark-thick',
					setHeight	: '100%',
					advanced	:	{
										autoExpandHorizontalScroll:true,
										setTop: 0
									}
				};
				jQuery('.scrollContainer').mCustomScrollbar(params);
			});
		</script>
		</div>
	{/strip}