@extends('layouts.app')

@section('content')
    <main class="page-maincontent" id="page-main-content">
        <!-- SECTION Login Form -->
        <section
                class="section-authentication-form"
                id="vj-authentication-login"
                data-scroll
        >
            <!-- Background -->
            <div class="bg-layer">
                <figure class="bg-img img-holder">
                    <picture>
                        <source srcset="{{ asset('app/img/login/login-bg-tablet.jpg') }}" media="(max-width: 1080px)">
                        <source srcset="{{ asset('app/img/login/login-bg-mb.jpg') }}" media="(max-width: 480px)">
                        <img src="{{ asset('app/img/login/login-bg.jpg') }}" alt=""/>
                    </picture>
                </figure>
            </div>

            <!-- Login Form -->
            <div class="login-form-holder standard-form">
                <!-- Form Head  -->
                <div class="form-head">
                    <!-- Background -->
                    <figure class="img-holder key-visual">
                        <img src="{{ asset('app/img/vj-key-visual.png') }}" alt=""/>
                    </figure>
                    <h2 class="auth-page-header jambono med">
                        Vietjet Love Connection
                    </h2>
                </div>

                <!-- Form Body -->
                <div class="form-body">
                    <!-- Form Title -->
                    <h2 class="form-title txt-center">Forgot your password?</h2>
                    <p class="form-title txt-center mb-70">Enter your registered email address to recover your password</p>

                    <!-- ID/PW Login Form Group -->
                    <div class="id-pw-login-form-group mb-30">
                        <form method="POST"
                              action="{{ route('password.email') }}"
                              class="vj-campaign-login-form"
                              autocomplete="off">
                        @csrf
                            <div class="form-row mb-30">
                                <input id="email"
                                       type="email"
                                       id="login-email-input"
                                       placeholder="Email address"
                                       class="form-control @error('email') is-invalid @enderror" name="email"
                                       value="{{ old('email') }}"
                                       required
                                       autocomplete="email"
                                       autofocus>

                                @error('email')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>

                            <!-- CTA Holder -->
                            <div class="cta-holder">
                                <button type="submit" class="btn btn-block">Verify your email address</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </section>
        <!-- SECTION Login Form -->
    </main>

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

    <form method="POST" action="{{ route('password.email') }}">
        @csrf

        <div class="row mb-3">
            <label for="email" class="col-md-4 col-form-label text-md-end">{{ __('Email Address') }}</label>

            <div class="col-md-6">
                <input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email"
                       value="{{ old('email') }}" required autocomplete="email" autofocus>

                @error('email')
                <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                @enderror
            </div>
        </div>

        <div class="row mb-0">
            <div class="col-md-6 offset-md-4">
                <button type="submit" class="btn btn-primary">
                    {{ __('Send Password Reset Link') }}
                </button>
            </div>
        </div>
    </form>
@endsection