@extends('layouts.app')

@section('content')
<div class="bg-white w-full border p-7 rounded-lg shadow-custom">
    <div class="mb-8 grid gap-1 text-center">
        <h3 class="text-2xl text-darkblue font-syne font-semibold">Reset Password</h3>
        {{-- <p class="text-gray-600">Already have an account? <a href="{{ route('login') }}"
                class="text-primary underline">Login here</a></p> --}}
    </div>
    <form method="POST" action="{{route($submitUrl)}}" class="w-full">
        @csrf

        <input type="hidden" name="token" value="{{$token}}">

        <div class="flex flex-col gap-3">
            <div class="w-full">
                <input id="newPassword" type="password" name="password" placeholder="New Password"
                    class="border border-gray-200 focus:ring-0 outline-none px-5 py-3 rounded w-full @error('newPassword') is-invalid @enderror"
                    name="newPassword" value="{{ old('newPassword') }}" required autocomplete="newPassword" autofocus>
                @error('newPassword')
                <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
                @enderror
            </div>

            <div class="w-full">
                <input id="confirmPassword" type="password" name="password_confirmation" placeholder="Confirm Password"
                    class="border border-gray-200 focus:ring-0 outline-none px-5 py-3 rounded w-full @error('confirmPassword') is-invalid @enderror"
                    name="confirmPassword" value="{{ old('confirmPassword') }}" required autocomplete="confirmPassword"
                    autofocus>
                @error('confirmPassword')
                <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
                @enderror
            </div>

            <button type="submit" class="w-full text-lg button button--secondary">
                {{ __('Set New Password') }}
            </button>
            <a class="text-primary font-semibold text-center" href="{{ route($loginUrl) }}">Back to Sign In</a>
        </div>
    </form>
</div>
@endsection
@push('headerPartial')
<style>
    .showHide::before {
        content: "";
        position: absolute;
        transform: rotate(125deg);
        width: 1px;
        height: 21px;
        top: -3px;
        left: 8px;
        background-color: black;
        transition: height .2s;
    }
</style>
@endpush