@extends('layouts.frontend')

@section('title')
	@lang('auth.page_title')
@endsection

@section('content')
	<style>
		.modal-header {
		    padding: 15px;
		    border-bottom: 1px solid #e5e5e5;
		}
		.form-horizontal{
			margin-top: 0px
		}
		.modal .btn {
		    background-color: #00c6f6;
		}
		.login {
			position: relative;
		}

		.login .form-control {
			height: 40px;
			box-shadow: none;
		}

		.login .form-group {
			margin-bottom: 20px;
		}

		.login .form-group label {
			font-weight: normal;
		}

		.login .container {
			position: absolute;
			top: 50%;
			width: 100%;
			margin-top: -330px;
		}

		.login.register .container {
			position: static;
			top: auto;
			width: 100%;
			margin-top: 0;
		}

		.login-bg {
			height: 100vh;
			background: #f5f5f5;
		}

		.login-parallax {
			background-image: url("assets/img/1k-Login-LMS.jpg");
			background-repeat: no-repeat;
			background-attachment: fixed;
			background-position: center;
			background-size: cover;
		}

		.login-parallax .login-box {
			background: rgba(41, 41, 41, 0.9);
		}

		.login-box {
			width: 450px;
			margin: 0 auto;
			padding: 30px;
			background: #fff;
			max-width:100%;
		}

		.login-box .login-logo img{
			max-width: 80%;
		}

		.login-box.gray-bg {
			width: auto;
			background: #f5f5f5;
		}

		.login-logo {
			padding: 0px 0 30px;
		}

		.full-width {
			position: relative;
			width: 100%;
		}
		.recordarme{
			color : #fff;
		}
		a, a:active{
			color: #fff
		}
		a:focus, a:hover{
			color: #fdfdfd;
			text-decoration: none;
	  	}
		.btn-dark-solid {
			color: #fff;
			background: #222;
		}

		.btn-theme-color,
		.btn-dark-solid:hover,
		.btn-dark-solid:focus,
		.btn-theme-border-color:hover {
			color: #fff;
		}
		.login-social-link {
			display: inline-block;
			width: 100%;
			margin-bottom: 15px;
		}

		.login-social-link a.facebook {
			float: left;
			margin-right: 22px;
			background: #3b5999;
		}

		.login-social-link a.facebook:hover {
			color: #fff;
			background: #30497d;
		}

		.login-social-link a {
			width: 47%;
			padding: 10px 38px;
			text-align: center;
			color: #fff;
			border-radius: 4px;
		}

		.login-social-link a.twitter {
			float: left;
			background: #63c6ff;
		}

		.login-social-link a.twitter:hover {
			color: #fff;
			background: #4c98c4;
		}

		.copyright-row {
			margin-top: 20px;
			color: #5E5E5E;
		}
		.copyright-row a{
			 color: #5E5E5E;
		 }
		@media screen and ( max-width: 480px ){
			.login-box{
				transform: translateY(20%);
			}
			.login .container {
				 position: absolute;
				 top: 10%;
				 width: 100%;
				 margin-top: 0px;
			 }
            .forgotlink{
                padding-top: 3px
            }
		}
		.htn-form{
			display:none
		}
	</style>
	<div class="login login-bg login-parallax">

		<div class="container">
			<div class="login-box btn-rounded wow slideInDown animated">
			<div class="default-form">
				{!! Form::open(['url' => '/login', 'method' => 'POST', 'id' => 'login_form']) !!}

					<div class="text-center login-logo">
						<h3><img src="{{asset('assets/img/logo-login.png')}}" alt=""></h3> 
					</div>

					@if (session('status'))
						<div class="alert alert-success">
							{{ session('status') }}
						</div>
					@endif

					<div class="form-group">
						<input type="text" id="login-form-username" autocomplete="off" class="form-control " name="login" placeholder="{{trans('auth.login')}}" value="{{ old('login') }}">
						@if ($errors->has('login'))
							<span class="help-block">
									<strong>{{ $errors->first('login') }}</strong>
								</span>
						@endif
					</div>

					<div class="form-group">
						<input type="password" id="login-form-password" class="form-control " name="password" placeholder="{{trans('auth.passwd')}}" value="" id="password" >
						@if ($errors->has('password'))
							<span class="help-block">
								<strong>{{ $errors->first('password') }}</strong>
							</span>
						@endif
					</div>

					<div class="form-group">
						<button style="margin-bottom:10px" class="btn btn-small btn-dark-solid full-width btn-rounded" id="login-form-submit" name="login-form-submit" value="login">Ingresar</button>
						<a href="javascript:void(0)" class="btn btn-small btn-dark-solid full-width btn-rounded" id="show-htn-form">Ingresar con HTN</a>
					</div>

					<div class="form-group">
						<label class="recordarme"><input type="checkbox" name="remember" />@lang('auth.remember')</label>
						<a class="pull-right forgotlink" data-toggle="modal" href="#forgotPass"> @lang('auth.forgot')</a>
					</div>

				{!! Form::close() !!}
			</div>
			<div class="htn-form">
				{!! Form::open(['url' => '/htnlogin', 'method' => 'POST', 'id' => 'htn_login_form']) !!}

					<div class="text-center login-logo">
						<h3><img src="{{asset('assets/img/logo-login.png')}}" alt=""></h3> 
					</div>

					@if (session('status'))
						<div class="alert alert-success">
							{{ session('status') }}
						</div>
					@endif

					<div class="form-group">
						<input type="text" id="verification_code" autocomplete="off" class="form-control" name="verification_code" placeholder="{{trans('auth.verification-code')}}" value="{{ old('verification_code') }}">
						@if ($errors->has('verification_code'))
							<span class="help-block">
									<strong>{{ $errors->first('verification_code') }}</strong>
							</span>
							<script>var htnform = true;</script>
						@endif
					</div>

					<div class="form-group">
						<button style="margin-bottom:10px" class="btn btn-small btn-dark-solid full-width btn-rounded" name="login-form-submit" value="login">Ingresar</button>
						<a href="javascript:void(0)" class="btn btn-small btn-dark-solid full-width btn-rounded" id="show-default-form">Ingresar con email y contraseña</a>
					</div>

					<div class="form-group">
						<label class="recordarme"><input type="checkbox" name="remember" />@lang('auth.remember')</label>
					</div>

				{!! Form::close() !!}
			</div>


				{!! csrf_field() !!}
			</div>
			<!-- <div class="copyright-row text-center ">
				<a href="https://fundacionhtn.org" class="">Fundación HTN </a> {{ date('Y') }}
			</div> -->
		</div>

	</div>
	<div class="modal fade" id="forgotPass">
		{!! Form::open(['url' => '/password/email', 'method' => 'POST', 'id' => 'forget_form']) !!}
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title">@lang('auth.forgot')</h5>
				</div>
				<div class="modal-body">
					<div class="formpre">
						<label for="login-form-forget">@lang('frontend.messages.forgotpass')</label>
						<input type="email" id="login-form-forget" autocomplete="off" class="form-control " name="email" placeholder="{{trans('auth.login')}}" value="{{ old('login') }}" data-error="@lang('frontend.messages.wrongemail')">
						<div class="forgetresponse"></div>
						<div class="successforget"></div>
					</div>
				</div>
				<div class="modal-footer">
					<div class="formpre">
						<button type="button" class="btn btn-small btn-dark-solid btn-rounded" data-dismiss="modal">@lang('frontend.buttons.close')</button>
						<button type="submit" class="btn btn-small btn-dark-solid btn-rounded" id="send_forget" data-altext="@lang('frontend.buttons.sending')">@lang('frontend.buttons.send')</button>
					</div>
				</div>
			</div>
		</div>
		{!! Form::close() !!}
	</div>
	{{--
<section id="login hidden">
	<div id="login_bar">
		<div class="pad">
			<a class="logo" href="">
				<img class="lg" src="{{asset('assets/img/logo.png')}}" />
			</a>				
			<div class="form-login">
				<div class="botones-login">
					<a href="login" class="btn-login sel"><img src="{{asset('assets/img/login-usuario.png')}}" /></a>
					<!--<a href="nuevo_usuario" class="btn-nuevo"><img src="{{asset('assets/img/login-nuevo-usuario.png')}}"></a>-->
				</div>

				{!! Form::open(['url' => '/login', 'method' => 'POST', 'id' => 'login_form']) !!}
					<div class="form-group{{ $errors->has('email') ? ' has-error' : '' }}">
						<div class="elem">
							<input type="text" class="field" name="login" placeholder="{{trans('auth.login')}}" value="{{ old('login') }}" id="login-1" />
							@if ($errors->has('login'))
                                <span class="help-block">
                                    <strong>{{ $errors->first('login') }}</strong>
                                </span>
                        	@endif
						</div>
					</div>

					<div class="form-group{{ $errors->has('password') ? ' has-error' : '' }}">
						<div class="elem">
							<input type="password" class="field" name="password" placeholder="{{trans('auth.passwd')}}" value="" id="password" />
							<!--<input type="hidden" name="submit_login" value="1" id="submit_login" />-->
						</div>
						@if ($errors->has('password'))
                            <span class="help-block">
                                <strong>{{ $errors->first('password') }}</strong>
                            </span>
                        @endif
					</div>

					<div class="elem">
						<!--<a href="#" class="submit" id="loginform"><img src="{{asset('assets/img/svg/flecha-der.svg')}}" /></a>-->
						<label class="recordarme"><input type="checkbox" name="remember" />@lang('auth.remember')</label>
					</div>

					<div class="elem">
						<button type="submit" class="btn">@lang('auth.button')</button>
						<a href="#" class="olvide hidden">@lang('auth.forgot')</a>
					</div>
				{!! Form::close() !!}

				<!--<form id="nuevo_usuario_form">
					{!! csrf_field() !!}
					<div class="elem"><input type="text" class="field" name="nombre" placeholder="Nombre" value="" /></div>
					<div class="elem"><input type="text" class="field" name="apellido" placeholder="Apellido" value="" /></div>
					<div class="elem"><input type="text" class="field" name="correo" placeholder="Correo Electrónico" value="" /></div>
					<div class="elem"><input type="text" class="field" name="perfil" placeholder="Perfil" value="" /></div>
					<div class="elem"><input type="password" class="field" name="contrasena" placeholder="Contraseña" value="" /></div>
					<div class="elem">
						<a href="#" class="submit" id="regform"><img src="{{asset('assets/img/svg/flecha-der.svg')}}" /></a>
					</div>
				</form>-->
			</div>
		</div><!-- .pad -->
	</div><!-- #login_bar -->
	<div id="bg_login">
	</div>
</section><!-- #login -->
--}}
@endsection

@section('login-script')

<script>
</script>

@endsection