@extends('frontend.layouts.authMain')
@section('content')
<main class="pb-20 xs:pb-0">
    <section class="flex items-start justify-between">
        <!-- Hide the image on smaller screens -->
        <div class="w-[400px] 2xl:w-[500px] h-screen hidden md:block">
            <img src="{{ asset('frontend/src/images/banner-image-02.png') }}"
                 alt="banner image"
                 class="w-[400px] 2xl:w-[500px] h-full fixed left-0 top-0">
        </div>

        <div class="md:px-10 xl:px-[60px] py-5 md:py-[30px] md:pb-[50px] flex-1 w-full">
            <div class="flex md:items-center justify-between flex-col text-center md:flex-row">
                <a href="{{ url('/') }}"
                   class="fixed w-full left-0 top-0 backdrop-blur-[20px] py-5 md:static md:w-fit md:backdrop-blur-none md:py-0 z-20">
                    <img src="{{ asset('frontend/src/images/logo-alt.png') }}"
                         alt="logo"
                         class="w-[152px] lg:w-[177.74px]">
                </a>
            </div>
            <div class="px-6 xs:px-10 sm:px-20 md:px-10 xl:px-[60px] pt-6 xl:pt-16 w-full">
                <form method="POST" action="{{ route('password.email') }}" class="w-full" id="reset-password-form">
                    @csrf
                    <h4 class="text-black text-[22px] lg:text-[26px] font-bold">Reset Password</h4>
                    <p class="pt-[14px] text-[#515151] font-normal text-sm">
                        Enter your email address to receive a password reset link.
                    </p>

                    <label for="email" class="block text-[#191919] text-sm font-semibold mb-2.5">Email address</label>
                    <input id="email" type="email" name="email" placeholder="Your email address"
                           class="w-full p-3 border-[1px] border-[#d2d2d2] rounded-[5px] mb-5 focus:outline-none focus:border-red-color"
                           required autofocus autocomplete="email">
                    <x-input-error :messages="$errors->get('email')" class="mb-4" style="color:red; margin-top:-17px;"/>

                    <div class="text-center pb-[46px]">
                        <x-primary-button class="rounded-[5px] py-[15px] px-24 bg-blue-color text-sm text-white font-semibold duration-300 hover:bg-red-color whitespace-nowrap">
                            {{ __('Email Password Reset Link') }}
                        </x-primary-button>
                    </div>

                    <div class="flex items-center justify-end mt-4">
                        <a href="{{ route('login') }}"
                           class="underline text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800">
                            {{ __('Back to Login') }}
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </section>
</main>

@section('scripts')



@endsection