@extends('layouts.auth')

@section('title')
    Reset Password
@endsection

@section('content')

<!-- component -->
<div class="h-screen md:flex">
    <div
        class="relative overflow-hidden md:flex w-full bg-gradient-to-tr from-slate-900 to-gray-900 i justify-around items-center hidden">
        <div class="p-3">
            <h1 class="text-white font-bold text-4xl montserrat">Forgot Your Password?</h1>
            <p class="text-white mt-1 montserrat">Continue To Add A New One</p>
            {{--<img src="assets/images/widgets/auth-alt.png" alt="">--}}
        </div>
        <div class="absolute -bottom-32 -left-40 w-80 h-80 border-4 border-dashed rounded-full border-opacity-30 border-t-8 border-primary-500"></div>
        <div class="absolute -bottom-40 -left-20 w-80 h-80 border-4 rounded-full border-opacity-30 border-t-8 border-pink-500"></div>
        <div class="absolute -top-40 -right-0 w-80 h-80 border-4 rounded-full border-opacity-30 border-t-8 border-primary-500"></div>
        <div class="absolute -top-20 -right-20 w-80 h-80 border-4 border-dashed rounded-full border-opacity-30 border-t-8 border-pink-500"></div>
    </div>
    <div class="flex md:w-1/2 lg:w-1/2 xl:w-1/4 justify-center p-10 items-center bg-white">
        <form method="POST" action="{{ route('password.email') }}">
            @csrf
            <div class="text-center">
                <a href="{{ url('/') }}"><img src="{{ asset('assets/images/logo-sm.png') }}" alt="" class="h-14 mx-auto mb-2"></a>
                <h1 class="text-gray-800 font-bold text-2xl mb-1 mt-8 md:mt-1 montserrat">Reset Password</h1>
                <p class="text-xs text-gray-600 mb-7 font-medium montserrat">Enter your email to proceed.</p>
            </div>
            <x-alert/>
            <div class="mb-4 mt-3">
                <div class="flex items-center border-2 py-2 px-3 rounded-md">
                    <i class="fas fa-user text-gray-400"></i>
                    <input class="pl-2 outline-none border-none" type="email"  value="{{ old('email') }}" name="email" required id="email" placeholder="Email" />
                </div>
                @error('email')
                    <span class="text-red-600 mx-auto invalid-feedback" role="alert">
                        <small class="text-center">{{ $message }}</small>
                    </span>
                @enderror
            </div>

            <button type="submit" class="block w-full mt-4 py-2 rounded-md text-white font-semibold mb-2" style="background: #ec595a;">Send Password Reset Link</button>

        </form>                
    </div>

    <div class="absolute -top-40 sm:block md:hidden -right-0 w-36 h-52 border-4 rounded-full border-opacity-30 border-t-8 border-primary-500"></div>
    <div class="absolute -top-20 sm:block md:hidden right-7 w-24 h-24 border-4 border-dashed rounded-full border-opacity-30 border-t-8 border-pink-500"></div>
</div>


@endsection