@extends('layouts.frontend')

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

@section('content')
    <style>.login {
            position: relative;
        }
.form-horizontal{
    margin-top: 0px
}
        .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: #ccc;
        }
        .copyright-row a{
            color: #ccc;
        }
        .login-box label{
            color: #fff;
        }
        .help-block.error{
            color: #F44336
        }
        @media screen and ( max-width: 480px ){
            .login-box{
                transform: translateY(20%);
            }
        }

        .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
            }
        }
    </style>
    <div class="login login-bg login-parallax">

        <div class="container">
            <div class="login-box btn-rounded wow slideInDown animated">
                    <form class="form-horizontal" role="form" method="POST" action="{{ url('/password/reset') }}">
                        {!! csrf_field() !!}

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

                        <div class="form-group">
                            <div class="col-md-12" style="text-align: center;">
                                <label><h5>@lang('auth.getPassword')</h5></label>
                            </div>
                        </div>

                        <input type="hidden" name="token" value="{{ $token }}">

                        <div class="form-group{{ $errors->has('email') ? ' has-error' : '' }}">

                            <div class="col-md-12">
                                <label for="login-form-forget">@lang('auth.login')</label>
                                <input type="email" class="form-control" name="email" value="{{ old('email') }}">

                                @if ($errors->has('email'))
                                    <span class="help-block error">
                                        <strong>{{ $errors->first('email') }}</strong>
                                    </span>
                                @endif
                            </div>
                        </div>

                        <div class="form-group{{ $errors->has('password') ? ' has-error' : '' }}">

                            <div class="col-md-12">
                                <label>Password</label>
                                <input type="password" class="form-control" name="password">

                                @if ($errors->has('password'))
                                    <span class="help-block error">
                                        <strong>{{ $errors->first('password') }}</strong>
                                    </span>
                                @endif
                            </div>
                        </div>

                        <div class="form-group{{ $errors->has('password_confirmation') ? ' has-error' : '' }}">
                            <div class="col-md-12">
                                <label>Confirm Password</label>
                                <input type="password" class="form-control" name="password_confirmation">

                                @if ($errors->has('password_confirmation'))
                                    <span class="help-block error">
                                        <strong>{{ $errors->first('password_confirmation') }}</strong>
                                    </span>
                                @endif
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-md-12 center centered">
                                <button type="submit" class="btn btn-small btn-dark-solid full-width btn-rounded">
                                    <i class="fa fa-btn fa-refresh"></i> @lang('auth.getPassword')
                                </button>
                            </div>
                        </div>
                    </form>
                {!! 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>
@endsection

@section('login-script')

    <script>
    </script>

@endsection