@extends('layouts.guest')
@section('content')
<a href="#" class="btn-support btn-blue btn-fill-horz-o"> <i class="fa fa-life-ring"></i>Support </a>
<div class="container-fluid ">
	{{-- Alert Messages --}}
	@include('sweetalert::alert')

	<div class="row">
		<div class="col-sm-4 sm-media">
			<div class="row">
				
				{{-- Login Form --}}
				<div id="login-Container" class="flex-container">
					<div class="logo-margin">
						<img src="{{ asset('theme/images/login/golars.png') }}" class="logo" alt="FirstACS" >
					</div>
					<div class="form-width">
						<form role="form" action="{!! URL::to('/login') !!}" method="post">
							{{ csrf_field() }}
							<div class="group">      
								<input type="text" name="email" value="{{ old('username')}}" required >
								<span class="highlight "></span>
								<span class="bar "></span>
								<label class="input-margin">Username</label>
								<span class="icon-16 icon-16User"></span>
							</div>
							<div class="group">      
								<input type="password" name="password" required>
								<span class="highlight "></span>
								<span class="bar "></span>
								<label class="input-margin">Password</label>
								<span class="icon-16 icon-16Password"></span>
							</div>
							<div class="checkbox">
								<input type="checkbox" name="checkbox">
								<label for="checkbox" >Remember Me</label>
							</div>
							<div><button type="submit" value="1" class="btn btn-default btn-login" >Login
								</button>
							</div>
						</form>
					</div>
					<div class="optionLink" ><a href="#" id="show">Lost Your Password?</a> 
					</div>
					<div id="allrights">
						<div class="copy-rights">All Rights Reserved {{ date('Y') }} to First ACS</div>
						<div class="Policy-text"><a href="#">Privacy Policy</a> | <a href="#">Terms & Conditions</a></div>
					</div>
				</div>

				{{-- Forgot Password Form --}}
				<div id="fpasword-Container" style="display: none;">
					<div class="logo-margin">
						<img src="{{ asset('theme/images/login/golars.png') }}" class="logo" alt="ACS">
					</div>
					<div class="form-width">
						<form method="POST" action="{{ url('/forget-password') }}">
							{!! csrf_field() !!}
							<div class="group">      
								<input id="email" type="email" class="{{ $errors->has('email') ? ' is-invalid' : '' }}" name="email" value="{{ old('email') }}" required>
								<span class="highlight "></span>
								<span class="bar "></span>
								<label class="input-margin">Email ID</label>
								<span class="icon-16 icon-16Email"></span>
							</div>
							<div><button type="submit" class="btn btn-default btn-login">Send Password Reset Link 
								<i class="fa fa-lock"></i>
								</button>
							</div>
						</form>
					</div>
					<div  class="optionLink" >
						<a href="#" id="hide"><strong>Back to Login</strong></a>
					</div>
					<div id="allrights">
						<div class="copy-rights">All Rights Reserved {{ date('Y') }} to First ACS</div>
						<div class="Policy-text"><a href="#">Privacy Policy</a> | <a href="#">Terms & Conditions</a></div>
					</div>
				</div>

				{{-- Register Form --}}
				<div id="register-Container" >
					<div class="logo-margin">
						<img src="{{ asset('theme/images/login/logo.png') }}" class="logo" alt="ACS">
					</div>
					<div class="form-width">
						<form >
							<div class="group rg-group">      
								<input type="text" required class="input-rg"  >
								<span class="highlight "></span>
								<span class="bar "></span>
								<label class="input-margin">Your Name</label>
								<span class="icon-16 icon-16User"></span>
							</div>
							<div class="group rg-group">      
								<input type="text" required class="input-rg"  >
								<span class="highlight "></span>
								<span class="bar "></span>
								<label class="input-margin"> Your Phone Number</label>
								<span class="icon-16 icon-16phone"></span>
							</div>
							<div class="group rg-group">      
								<input type="email" required  class="input-rg" >
								<span class="highlight "></span>
								<span class="bar "></span>
								<label class="input-margin">Your Email </label>
								<span class="icon-16  icon-16Email"></span>
							</div>
							<div class="group rg-group">      
								<input type="Password" required  class="input-rg" >
								<span class="highlight "></span>
								<span class="bar "></span>
								<label class="input-margin">Password </label>
								<span class="icon-16 icon-16Password"></span>
							</div>
							<div class="group rg-group">      
								<input type="password" required  class="input-rg" >
								<span class="highlight "></span>
								<span class="bar "></span>
								<label class="input-margin">Confirm Password </label>
								<span class="icon-16 icon-16Password"></span>
							</div>
							<div><button type="submit" class="btn btn-default btn-login" >Create an Account
								<i class="fa fa-long-arrow-right"></i>
								</button>
							</div>
						</form>
					</div>
					<div  class="optionLink" >
						Already Have an Account <a href="#" id="rg-hide"><strong>Back to Login</strong></a>
					</div>
					<div id="allrights">
						<div class="copy-rights">All Rights Reserved {{ date('Y') }} to First ACS</div>
						<div class="Policy-text"><a href="#">Privacy Policy</a> | <a href="#">Terms & Conditions</a></div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-sm-8 " id="promo-Container" >
			<div  id="promo-gradient" class="diagonal-gradient"></div>
			<div class="row ">
				<div  class="promo-text-aling">
					<div class="centered" >
						<h1><span> 80%  </span> Of People </h1>
						<p class="disc"> Make Purchasing decisions to Solve a Problem.
						</p>
					</div>
					<div>
						<img src="{{ asset('theme/images/login/img1.jpg') }}" class="img" >
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<script>
	$(document).ready(function(){
		$("#hide").click(function(){
			$( "#fpasword-Container" ).toggle( "slide" );
		});
		$("#show").click(function(){
			$( "#fpasword-Container" ).toggle( "slide" );
		});  
	});
	
	$(function(){
		$('.form-control').each(function(){
			changeState($(this));
		});
	
		$('.form-control').on('focusout', function(){
			changeState($(this)); 
		});
	
		function changeState($formControl){
			if($formControl.val().length > 0){
				$formControl.addClass('has-value');
			}
			else{
				$formControl.removeClass('has-value');
			}  
		}
		
	
		$('.form-ControlTextArea').each(function(){
			changeState($(this));
		});
	
		$('.form-ControlTextArea').on('focusout', function(){
			changeState($(this)); 
		});
	
		function changeState($formControl){
			if($formControl.val().length > 0){
				$formControl.addClass('has-value');
			}
			else{
				$formControl.removeClass('has-value');
			}  
		}
	});
</script>
@endsection