@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>
            </div>
            
            <div class="px-6 xs:px-10 sm:px-20 md:px-10 xl:px-[60px] pt-6 xl:pt-16 w-full">
                <h4 class="text-black text-[22px] lg:text-[26px] font-bold">Confirm Password</h4>
                <div class="mb-4 text-sm text-gray-600 dark:text-gray-400">
                    {{ __('This is a secure area of the application. Please confirm your password before continuing.') }}
                </div>

                <form method="POST" action="{{ route('password.confirm') }}" class="w-full">
                    @csrf

                    <!-- Password -->
                    <label for="password" class="block text-[#191919] text-sm font-semibold mb-2.5">Password</label>
                    <input id="password" type="password" name="password" placeholder="Enter your password" class="w-full p-3 border-[1px] border-[#d2d2d2] rounded-[5px] mb-5 focus:outline-none focus:border-red-color" required autocomplete="current-password">
                    <x-input-error :messages="$errors->get('password')" class="mt-2" />

                    <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">
                            {{ __('Confirm') }}
                        </x-primary-button>
                    </div>
                </form>
            </div>
        </div>
    </section>
</main>
@endsection