@extends('components.layout-component')
@section('other_page_title')
    {{ __('messages.Reset password') }}
@endsection
@section('content')
    <div class="w-full md:rounded-br-[2rem] md:rounded-tr-[2rem]">
        <div class="w-full sm:max-w-md px-6 py-4 overflow-hidden sm:rounded-lg mx-auto">
            @if ($errors->has('error'))
                <div class="mb-4 font-semibold text-lg text-red text-center">
                    {{ $errors->first('error') }}
                </div>
            @endif
            @if (session('status'))
                <div class="mb-4 font-semibold text-lg text-green text-center">
                    {{ session('status') }}
                </div>
            @endif
            <form method="POST" action="{{ route('reset') }}">
                @csrf
                <input type="hidden" name="email" value="{{ $email }}">
                <input type="hidden" name="token" value="{{ $token }}">
                <div class="flex flex-col gap-6 mt-6" x-data="{
                    newPassword: '',
                    confirmPassword: '',
                    isValid: false,
                    validate() {
                        this.isValid = this.newPassword.length >= 8 && this.newPassword === this.confirmPassword;
                    }
                }">
                    <div x-data="{ showPassword: false }" class="w-full relative">
                        <p class="font-bold text-base">{{ __('messages.New Password') }}</p>
                        <div class="relative">
                            <input placeholder="{{ __('messages.New Password') }}"
                                :type="showPassword ? 'text' : 'password'" x-model="newPassword" @input="validate"
                                class="bg-white p-2 border mt-3 w-full" name="password" />
                            <button type="button" class="absolute rtl:left-0 bottom-4 ltr:right-0 cent px-4 text-gray-600"
                                @click="showPassword = !showPassword">
                                <i
                                    :class="showPassword ? 'fa-solid fa-eye-slash cursor-pointer text-gray' :
                                        'fa-solid fa-eye cursor-pointer text-gray'"></i>
                            </button>
                        </div>
                        <div x-show="newPassword.length > 0 && newPassword.length < 8"
                            class="text-red mx-2 mt-2 font-semibold">
                            {{ __('messages.Password must be at least 8 characters.') }}
                        </div>
                    </div>
                    <div x-data="{ showPassword: false }" class="w-full relative">
                        <p class="font-bold text-base">{{ __('messages.confirm password') }}</p>
                        <div class="relative">
                            <input placeholder="{{ __('messages.confirm password') }}"
                                :type="showPassword ? 'text' : 'password'" x-model="confirmPassword" @input="validate"
                                class="bg-white p-2 border mt-3 w-full" name="password_confirmation" />
                            <button type="button" class="absolute rtl:left-0 bottom-4 ltr:right-0 cent px-4 text-gray-600"
                                @click="showPassword = !showPassword">
                                <i
                                    :class="showPassword ? 'fa-solid fa-eye-slash cursor-pointer text-gray' :
                                        'fa-solid fa-eye cursor-pointer text-gray'"></i>
                            </button>
                        </div>
                        <div x-show="confirmPassword.length > 0 && newPassword !== confirmPassword"
                            class="text-red mx-2 mt-2 font-semibold">
                            {{ __('messages.Passwords do not match.') }}
                        </div>
                    </div>
                    <div class="flex justify-center mt-3">
                        <button type="submit" class="btn-login" :disabled="!isValid"
                            :class="{ 'opacity-50 cursor-not-allowed': !isValid }">
                            {{ __('messages.Confirm') }}
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection