{flash.message.message}

handleKeyDown(e)} />

+62

} placeholder="whatsapp" name="phone" value={data.phone} onChange={handleOnChange} error={errors.phone} onKeyDownCapture={(e) => handleKeyDown(e)} formClassName={'pl-10'} />

handleKeyDown(e)}
                        />
                    </div>
                    <div className="w-full">
                        <FormInput
                            placeholder="username"
                            name="username"
                            value={data.username}
                            onChange={handleOnChange}
                            error={errors.username}
                            onKeyDownCapture={(e) => handleKeyDown(e)}
                        />
                    </div>
                    <div className="w-full">
                        <FormInput
                            type="password"
                            placeholder="password"
                            name="password"
                            value={data.password}
                            onChange={handleOnChange}
                            error={errors.password}
                            onKeyDownCapture={(e) => handleKeyDown(e)}
                        />
                    </div>
                    <div className="w-full">
                        <FormInput
                            type="password"
                            placeholder="retype password"
                            name="password_confirmation"
                            value={data.password_confirmation}
                            onChange={handleOnChange}
                            error={errors.password_confirmation}
                            onKeyDownCapture={(e) => handleKeyDown(e)}
                        />
                    </div>
                    <div className="w-full my-4">
                        <FormInput
                            placeholder="referral code (optional)"
                            name="referral_code"
                            value={data.referral_code}
                            onChange={handleOnChange}
                            error={errors.referral_code}
                            onKeyDownCapture={(e) => handleKeyDown(e)}
                        />
                    </div>
                    <div className="w-full flex flex-row justify-between">
                        <Button processing={processing} onClick={handleSubmit}>
                            Register
                        </Button>
                        {/* <a href="#" className="text-sm underline text-blue-600">
                            forgot password
                        </a> */}
                    </div>
                    <div className="flex flex-row items-center space-x-2 justify-between my-3">
                        <div className="border-b-2 w-full" />
                        <div>OR</div>
                        <div className="border-b-2 w-full" />
                    </div>
                    <div className="flex flex-row w-full justify-center">
                        <div
                            className="flex flex-row items-center space-x-2 border-2 border-blue-600 px-4 py-2 hover:bg-blue-500 hover:text-white rounded"
                            onClick={handleLoginWithGoogle}
                        >
                            <FcGoogle className="h-6 w-6" />
                            <div>Register with Google</div>
                        </div>
                    </div>
                    <div className="mt-10 w-full text-center text-blue-600 underline">
                        <Link href={route('customer.login')}>
                            already have account ? login
                        </Link>
                    </div>
                </div>
            </div>
        </CustomerLayout>
    )
}