@extends('layouts.access')
@section('content')
    <div class="flex min-h-full">
        <div class="relative hidden w-0 flex-1 lg:block"
            style="background:linear-gradient(to top, #a5cbe5, #c1d6ec, #d9e1f2, #edeef7, #fcfcfc)">
            <img class="absolute inset-0 max-w-80 m-auto object-cover" src="{{ asset('assets/panobiz_logo_large.webp') }}"
                alt="PANOBIZ HR">
        </div>
        <div class="flex flex-1 flex-col justify-center px-4 py-12 sm:px-6 lg:flex-none lg:px-20 xl:px-24">
            <div class="mx-auto w-full max-w-sm lg:w-96">
                <div>
                    <h2 class="mt-8 text-2xl font-bold leading-9 tracking-tight text-gray-900">Change your password</h2>
                </div>
                <div class="mt-10">
                    <form id="resetass" action="{{ route('password.update') }}" method="POST" class="space-y-6">
                        @csrf
                        <input type="hidden" name="token" value="{{ $token }}">
                        <div class="mb-10">
                            New Password

                            <div x-data="{ showPassword: false }" class="relative mt-2">
                                <input :type="showPassword ? 'text' : 'password'" name="password" id="password"
                                    class="peer block w-full pr-10 border-0 bg-gray-50 py-1.5 text-gray-900 focus:ring-0 sm:text-sm sm:leading-6"
                                    placeholder="">
                                <div @click="showPassword = !showPassword"
                                    class="cursor-pointer absolute inset-y-0 right-0 flex items-center pr-3">
                                    <i :class="showPassword ? 'fa-solid fa-eye' : 'fa-solid fa-eye-slash'"
                                        class="h-5 w-5 text-gray-400"></i>
                                </div>
                                <div class="absolute inset-x-0 bottom-0 border-t border-gray-300 group-[.error]:border-red-600 peer-focus:border-t-2 peer-focus:border-indigo-600"
                                    aria-hidden="true"></div>
                            </div>
                            @error('password')
                                <p class="mt-2 text-[9px] text-red-600" id="password-error">{{ $message }}</p>
                            @enderror

                            <div class="field-group mt-6 group relative pb-4">
                                Confirm Password
                                <div x-data="{ showPassword: false }" class="relative mt-2">
                                    <input :type="showPassword ? 'text' : 'password'" name="password_confirmation"
                                        id="password_confirmation"
                                        class="peer block w-full pr-10 border-0 bg-gray-50 py-1.5 text-gray-900 focus:ring-0 sm:text-sm sm:leading-6"
                                        placeholder="">
                                    <div @click="showPassword = !showPassword"
                                        class="cursor-pointer absolute inset-y-0 right-0 flex items-center pr-3">
                                        <i :class="showPassword ? 'fa-solid fa-eye' : 'fa-solid fa-eye-slash'"
                                            class="h-5 w-5 text-gray-400"></i>
                                    </div>
                                    <div class="absolute inset-x-0 bottom-0 border-t border-gray-300 group-[.error]:border-red-600 peer-focus:border-t-2 peer-focus:border-indigo-600"
                                        aria-hidden="true"></div>
                                </div>
                                @error('password_confirmation')
                                    <p class="mt-2 text-[9px] text-red-600" id="password_confirmation-error">{{ $message }}
                                    </p>
                                @enderror
                            </div>
                            <div class="flex items-center justify-between">
                                <div class="flex items-center">
                                    <p class="ml-3 block text-[9px] text-gray-700">
                                        Password must be at least 8 characters long and include an uppercase letter, a
                                        lowercase letter, a number, and a special character.
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="mt-10">
                            <button
                                class="flex w-full justify-center rounded-md bg-indigo-600 px-3 py-2.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
                                type="submit">
                                Change your password
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@stop