@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">Add A New Password</h1>
            <p class="text-white mt-1 montserrat">Make Sure To Add A Secure Password.</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.update') }}">
            @csrf
            
            <input type="hidden" name="token" value="{{ $token }}">

            <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">Proceed to add a new password.</p>
            </div>
            <div class="mb-4">
                <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"  value="{{ old('email') }}" type="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>
            <div class="mb-4">
                <div class="flex items-center border-2 py-2 px-3 rounded-md">
                    <i class="fas fa-lock text-gray-400"></i>
                    <input class="pl-2 outline-none border-none" type="password" name="password" required id="password" placeholder="New Password" />
                </div>
                @error('password')
                    <span class="text-red-600 mx-auto invalid-feedback" role="alert">
                        <small class="text-center">{{ $message }}</small>
                    </span>
                @enderror
            </div>
            <div class="mb-4">
                <div class="flex items-center border-2 py-2 px-3 rounded-md">
                    <i class="fas fa-lock text-gray-400"></i>
                    <input class="pl-2 outline-none border-none" type="password" name="password_confirmation" required id="password_confirmation" placeholder="Confirm Password" />
                </div>
                @error('password_confirmation')
                    <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;">Reset Password</button>

            </p>
        </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