@extends('tenant.layouts.auth')

@section('content')
    <div class="login-section px-4 pt-1 pb-0" style="height: 83vh;">
        <div class="row logo-row mb-2">
            <div class="col-12 logo-col py-2 px-5">
                <img src="{{asset('img/vector-3@2x.png')}}" class="logo-img" alt="" width="8%">
            </div>
        </div>
        <div class="container">
            <div class="row align-items-center p-4 ">
                <div class="col-lg-7  text-center  text-md-start  mb-4">
                    <h4 class="text-center mb-3" style="font-weight: 600;word-spacing: 2px;letter-spacing: 1px;"># Welcome to your second home <br> start your journey with <span
                            style="color: green;">Extensya</span></h4>
                    <div class="text-center">
                        <img src="{{asset('img/Login_animation2.gif')}}" class="text-center" alt="" width="78%">
                    </div>
                </div>
                <div class="col-lg-4 offset-lg-1 mx-auto">
                    <form class="border rounded-5 pb-3 shadow login-form" method="POST" action="{{ route('username.store') }}">
                        @csrf
                        <div class="form-floating py-4 login-lable ">
                            <style>
                                .login-lable-h1.reset::after {
                                    width: 17%;
                                }
                                .login-lable-h1.reset::before {
                                    width: 17%;
                                }
                            </style>
                            <h2 class="login-lable-h1 reset fw-bold text-center"><span >Forgot Username</span></h2>
                        </div>
                        @if (session('status'))
                            <div class="px-3 px-md-4">
                                <div class="alert alert-success" role="alert">
                                    {{ session('status') }}
                                </div>
                            </div>
                        @endif
                        <div class="px-3 px-md-4">
                            <div class="form-floating mb-5">
                                <input name="email" value="{{ old('email') }}" placeholder="Email" type="email" class="form-control" id="floatingInput" >

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

                            <div class="col-12 text-center">
                                <button class="w-100 btn btn-lg btn-success" type="submit" style="background:#00a34e">Send Username By Email</button>
                            </div>

                        </div>
                        <div class="form-floating py-4 login-lable">
                            <h6 class="login-lable-h1 text-body-tertiary text-center"><span>Hint</span></h5>
                        </div>
                        <div>
                            <p class="px-3 text-center text-secondary">
                                Please remember your username by entering your email above and clicking on the button
                            </p>
                        </div>

                        <div class="input-group mb-3 anyhelp-section">
                            <span class="input-group-text anyhelp-section-span" id="basic-addon1"><img src="{{asset('/img/iconsax-linear-profilecircle-1@2x.png')}}" alt="" width="20px"></span>
                            <a href="{{ route('login') }}" aria-describedby="basic-addon1" class="btn btn-sm under-button">Login Page</a>
                        </div>



                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection