@extends('frontend.layouts.authMain')
@section('content')
<main class="pb-20 xs:pb-0">
    <section class="flex items-start justify-between">
        <div class="w-[400px] 2xl:w-[500px] h-screen 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>

                {{-- @auth
                <p class="text-base font-normal text-black">{{ Auth::user()->name }} <a href="{{ route('login') }}" class="font-bold duration-300 hover:text-red-color">Log in</a></p>
                @else
                <p class="text-base font-normal text-black">Do you have an account? <a href="{{ route('login') }}" class="font-bold duration-300 hover:text-red-color">Log in</a></p>
                @endauth --}}
            </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.store') }}" class="w-full">
                    @csrf

                    <!-- Password Reset Token -->
                    <input type="hidden" name="token" value="{{ $request->route('token') }}">

                    <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 and new password.</p>

                    <!-- Email Address -->
                    <div class="mt-4">
                        <x-input-label for="email" :value="__('Email')" />
                        <x-text-input 
                            id="email" 
                            class="block mt-1 w-full p-3 border-[1px] border-[#d2d2d2] rounded-[5px] focus:outline-none focus:border-red-color" 
                            type="email" 
                            name="email" 
                            :value="old('email', $request->email)" 
                            required 
                            autofocus 
                            autocomplete="username" 
                            readonly 
                        />
                        <x-input-error :messages="$errors->get('email')" class="mt-2" />
                    </div>
                    

                    <!-- Password -->
                    <div class="mt-4">
                        <x-input-label for="password" :value="__('Password')" />
                        <x-text-input id="password" class="block mt-1 w-full p-3 border-[1px] border-[#d2d2d2] rounded-[5px] focus:outline-none focus:border-red-color" type="password" name="password" required autocomplete="new-password" />
                        <x-input-error :messages="$errors->get('password')" class="mt-2 text-red-500" style="color: red;" />
                    </div>

                    <!-- Confirm Password -->
                    <div class="mt-4">
                        <x-input-label for="password_confirmation" :value="__('Confirm Password')" />
                        <x-text-input id="password_confirmation" class="block mt-1 w-full p-3 border-[1px] border-[#d2d2d2] rounded-[5px] focus:outline-none focus:border-red-color" type="password" name="password_confirmation" required autocomplete="new-password" />
                        <x-input-error :messages="$errors->get('password_confirmation')" class="mt-2 text-red-500" style="color: red;" />
                    </div>

                    <div class="text-center pb-[46px] mt-6">
                        <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">
                            {{ __('Reset Password') }}
                        </x-primary-button>
                    </div>
                </form>
            </div>
        </div>
    </section>
</main>
@endsection