@extends('layouts.app')
@section('title')
    {{ __('message.Verifikasi Email') }}
@endsection
@section('content')
    <div class="min-h-screen flex flex-col items-center justify-center  "
        style="background-image: url('https://ifrcofficial.com/wp-content/uploads/2023/09/Screen-Shot-2023-09-06-at-10.52.09.png');opacity:95%">
        <div class="flex flex-col bg-white rounded-xl shadow-md px-4 sm:px-6 md:px-8 lg:px-10 py-8  w-full max-w-xl">
            <div class="flex justify-center items-center">
                <img src="{{ asset('uploads/setting/general/images/' . Helper::generalSetting('logo_light')) }}"
                    width="200" alt="">
            </div>

            <div class="mt-12">
                <div class="mb-3 text-md tracking-wide text-black font-bold">
                    {{ __('Silahkan masukan kata sandi baru anda.') }}
                </div>

                <div class="mt-4 flex items-center justify-between">
                    <form method="POST" action="{{ route('password.changeStore') }}" style="width: 100%;">
                        @csrf
                        <input type="hidden" name="token" value="{{ $request->route('token') }}">

                        <div class="flex flex-col mb-6">
                            <label for="phone_number" class="mb-1 text-md tracking-wide text-black font-bold">
                                {{ __('message.Konfirmasi Nomor HP') }}
                            </label>
                            <div class="relative">
                                <input id="phone_number" type="text" name="phone_number"
                                    class="text-sm sm:text-base placeholder-gray-500 pl-10 pr-4 rounded-lg border border-gray-400 w-full py-2 focus:outline-none focus:border-blue-400"
                                    placeholder="{{ __('message.Konfirmasi Nomor HP') }}" />
                            </div>
                        </div>
                        <div class="flex flex-col mb-6">
                            <label for="password"
                                class="mb-1 text-md tracking-wide text-black font-bold">{{ __('message.Password') }}</label>
                            <div class="relative">
                                <input id="password" type="password" name="password"
                                    class="text-sm sm:text-base placeholder-gray-500 pl-10 pr-4 rounded-lg border border-gray-400 w-full py-2 focus:outline-none focus:border-blue-400"
                                    placeholder="{{ __('message.Password') }}" />
                            </div>
                        </div>
                        <div class="flex flex-col mb-6">
                            <label for="password" class="mb-1 text-md tracking-wide text-black font-bold">
                                {{ __('message.Konfirmasi Password') }}
                            </label>
                            <div class="relative">
                                <input id="password" type="password" name="password_confirmation"
                                    class="text-sm sm:text-base placeholder-gray-500 pl-10 pr-4 rounded-lg border border-gray-400 w-full py-2 focus:outline-none focus:border-blue-400"
                                    placeholder="{{ __('message.Konfirmasi Password') }}" />
                            </div>
                        </div>
                        <div class="flex flex-col mb-6">
                            <div class="form-floating">
                                <div class="g-recaptcha" data-sitekey="{{ Helper::getGoogleKey() }}"></div>
                            </div>
                        </div>

                        <div class="flex w-full item-center justify-center">
                            <button type="submit"
                                class="flex items-center justify-center focus:outline-none text-white text-sm sm:text-base rounded-xl py-2 px-16 transition duration-150 ease-in"
                                style="background: #BA3C3C">
                                <span class="mr-2 uppercase">{{ __('message.Simpan') }}</span>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection