@extends('layout')

@section('title','Login')

@section('meta:title', 'AccessWorld: Login')
@section('meta:description', 'Login to your AccessWorld account or sign up for a new account.')

@section('content')
    <section class="no-banner p-0">
        <div class="container-fluid">
            <div class="section-body">
                <div class="row">
                    <div class="col-sm-6 fadeInUp animated login-left">
                        <h2 class="text-white awt-login-h2">The access to your world</h2>
                        <div class="awt-login-caption">
                            <div class="caption-text text-white">
                                <h4>Unlock your account and step into a world of personalized experiences, tailored just for you.</h4>
                            </div>
                            <div class="caption-text text-white">
                                <h6>Don't have an account yet?</h6>
                                <a href="{{ url('sign-up') }}" class="text-white">Create a new account now</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6 fadeInUp animated p-0" style="height: 100vh;">
                        <div class="card awtsignUpCard awtLoginCard">
                            <div class="card-head">
                                <h2 class="sign-up-card-header text-gray text-uppercase">Login</h2>
                            </div>
                            <div class="card-body">
                                @include('commons.alerts')
                                <form role="form" action="{{ url('login') }}" method="POST" class="form form-validate" novalidate>
                                    {{ csrf_field() }}
                                    <div class="form-group login-form-group">
                                        <input type="text" name="login" placeholder="Username or Email..." class="form-control" required>
                                        {{-- <label for="login">Username/Email</label> --}}
                                    </div>
                                    <div class="form-group login-form-group">
                                        <input type="password" name="password" placeholder="Password..." class="form-control" required>
                                        {{-- <label for="password">Password</label> --}}
 
                                    </div>
                                    <div class="form-group login-form-group col-sm-6">
                                        <div class="checkbox checkbox-inline checkbox-styled">
                                            <label>
                                                <input type="checkbox" name="remember">
                                                <span>Keep me logged in</span>
                                            </label>
                                        </div>
                                    </div>
                                    <div class="form-group login-form-group col-sm-6">
                                        <p class="help-block">
                                            <a href="#password-reset" data-toggle="modal" class="text-blue forgot-password">Forgot password?</a>
                                        </p>
                                    </div>
                                    <div class="row">
                                        <div class="col-sm-12">
                                            <div class="justify-item-center">  
                                                <button class="btn btn-default btn-raised loginBtn" type="submit">Login</button>
                                            </div>
                                        </div><!--end .col -->
                                    </div>
                                </form>
                            </div>
                            <div class="card-footer">
                                <div class="text-center text-default-bright">
                                    <h5 class="text-gray">Don't have an account yet?</h5>
                                    <h6><a href="{{ url('sign-up') }}"class="text-gray">Let's create one</a> </h6>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <div class="modal fade" id="password-reset" tabindex="-1" role="dialog" aria-labelledby="password-reset-label" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <form method="POST" action="{{ url('/password/email') }}" class="form form-validate" novalidate role="form">
                    {!! csrf_field() !!}
                    <div class="modal-header border-transparent">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title">Password Reset</h4>
                        <em>To reset your password via the email address associated with your account, please input your
                            email in the form and click on the "Send Email" button.</em>
                    </div>
                    <div class="modal-body">
                        <div class="form-group floating-label">
                            <input type="email" name="email" class="form-control" id="reset-email" required>
                            <label for="reset-email">Email</label>
                        </div>
                    </div>
                    <div class="modal-footer border-transparent">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-warning">Send Email</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@stop