Notes

"use client";

import Link from "next/link";
import { useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import * as Yup from "yup";
import axios from 'axios';
import React, { useState, useEffect } from "react";
// import { redirect } from 'next/navigation';
//import { useSession } from "next-auth/react";
import { useRouter } from 'next/navigation';

import { useTranslation } from 'react-i18next';
import { apiUrl } from '@/app/constant/constant';
import { toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

const validationSchema = Yup.object().shape({
email: Yup.string().required("Email is required").email("Email is invalid"),
password: Yup.string().required("Password is required").min(8) .max(18),
name: Yup.string().matches(/^[a-zA-Z ]+$/, 'Name must contain only letters and spaces').required("Name is required"),
country:Yup.string().required("Country is required"),
state:Yup.string().required("state is required"),
city:Yup.string().required("city is required"),
address:Yup.string().required("address is required"),
pincode:Yup.string().required("pincode is required"),
longitude:Yup.string().required("Longitude is required"),
latitude: Yup.string().required("Latitude is required"),
contact_no: Yup.string().matches(/^[0-9]{10}$/, 'Phone number must be 10 digits').required("Phone is required"),
user_type:Yup.string().required("User Role is required"),
});

const formOptions = { resolver: yupResolver(validationSchema) };




const Registration = () => {
const router = useRouter();
const { t } = useTranslation();
const [coords, setCoords] = useState({ latitude: '', longitude: '' });
console.log("coords:-", coords);
const [showPassword, setShowPassword] = useState(false);
const handleTogglePassword = () => {
setShowPassword(!showPassword);
};

const { register,trigger, handleSubmit, formState: { errors } } = useForm(formOptions);

const onSubmit1 = async (formData, event) => {

event.preventDefault();

const isSuccess = true;
try {
const res = await axios.post( `${apiUrl}api/register`, formData);
console.log(res.data);
if (res.data.success) {
toast.success(res.data.message);
router.push('/login');

} else {
toast.error(res.data.message);
}
} catch (error) {

toast.error('An error occurred');

}

};



const changeRole = async (value) => {
await trigger(['user_type'])
};


// Function to handle geocoding
const handleGeolocation = async (e) => {
const zipCode = e.target.value;
try {
const response = await axios.get(
`https://maps.googleapis.com/maps/api/geocode/json?address=${zipCode}&key=AIzaSyA5R2_idxcuyFfKAFRL3YEBxRa5rjOPOhY`
);

if (response.data && response.data.results && response.data.results.length > 0) {
const { lat, lng } = response.data.results[0].geometry.location;
setCoords({ latitude: lat, longitude: lng });
console.log("Latitude:", lat);
console.log("Longitude:", lng);


} else {
console.error("No results found for the provided zip code");
}
} catch (error) {
console.error("Error retrieving geolocation:", error);
}
};



return (
<>
<section
className="banner"

style={{
backgroundImage: `url(/assets/img/banner1.jpg)`,

}}
>
<div className="container">
<div className="row">
<div className="col-md-12">
<div className="banner-caption">
<h3>{t('Register')}</h3>

<ul className="breadcrumb">
<li>
<Link href="/">{t('Start')}</Link>
</li>
<li>{t('Register')}</li>
</ul>
</div>
</div>
</div>
</div>
</section>

<section id="signup" className="bg--scroll login-section division">
<div className="container">
<div className="row justify-content-center">
<div className="col-lg-11">
<div className="register-page-wrapper r-16 bg--fixed">
<div className="row">
<div className="col-md-6">
<div className="register-page-form">
<form name="signupform" method="post" onSubmit={handleSubmit(onSubmit1)} className="row sign-up-form">
<div className="col-md-12">
<p className="p-sm input-header">{t('Login for')}</p>
<select {...register("user_type")}
onChange={(e) => changeRole(e.target.value)} name="user_type" id="user_type" className="form-control login">
<option value="3">{t('Handyman')}</option>
<option value="2">{t('Suppliers')}</option>
<option value="4">{t('Private')}</option>
</select>


</div>

<div className="col-md-12">
<p className="p-sm input-header">{t('full name')}</p>
<input
{...register("name")}
className="form-control name"
type="text"
name="name"
placeholder="John Doe"
/>
</div>
<div className="col-md-12">
<p className="p-sm input-header">{t('Email address')}</p>
<input
{...register("email")}
className="form-control email"
type="email"
name="email"
placeholder="[email protected]"
/>
</div>

<div className="col-md-12">
<p className="p-sm input-header">{t('Password')}</p>
<div className="wrap-input">
<span className="btn-show-pass ico-20">
<span className="flaticon-visibility eye-pass" onClick={handleTogglePassword} style={{cursor:'pointer'}}></span>
</span>
<input
{...register("password")}
className="form-control password"
type={showPassword ? 'text' : 'password'}
name="password"
placeholder="min 8 characters"
/>
</div>

<div className="row">
<div className="col-md-6">
<p className="p-sm input-header">{t('Country')}</p>
<input
{...register("country")}
className="form-control name"
type="text"
name="country"
placeholder="Germany"
/>
</div>

<div className="col-md-6">
<p className="p-sm input-header">{t('State')}</p>
<input
{...register("state")}
className="form-control name"
type="text"
name="state"
placeholder="Hessen"
/>
</div>
<div className="col-md-6">
<p className="p-sm input-header">{t('City')}</p>
<input
{...register("city")}
className="form-control name"
type="text"
name="city"
placeholder="Wiesbaden"
/>
</div>

<div className="col-md-6">
<p className="p-sm input-header">{t('Zip Code')}</p>
<input
{...register("pincode")}
className="form-control name"
type="number"
name="pincode"
placeholder="56***"
onChange={handleGeolocation}
/>
</div>
</div>

<div className="col-md-12">
<p className="p-sm input-header">{t('Address')}</p>
<input
{...register("address")}
className="form-control name"
type="text"
name="address"
placeholder="Address"
/>
</div>

<div className="col-md-12">
<p className="p-sm input-header">{t('Contact')}</p>
<input
{...register("contact_no")}
className="form-control name"
type="number"
name="contact_no"
placeholder="99999*****"
/>
</div>

</div>
<div className="col-md-12">
<div className="form-data">
<span className="text-body">
{t('By clicking “Create Account”, you agree to our')}
<Link href="terms-condition">{t('Terms')}</Link> {t('and that you have read our')}
<Link href="privacy-policy"> {t('Privacy Policy')}</Link>
</span>
</div>
</div>

<div className="col-md-12">
<button onClick={handleSubmit(onSubmit1)}
type="submit"
className="btn btn--theme hover--theme submit"
>
{t('Create Account')}
</button>
</div>
<div className="col-md-12">
<p className="create-account text-body text-center">
{t('Already have an account?')}{" "}
<Link href="login" className="color--theme">
{t('Log in')}
</Link>
</p>
</div>
</form>
</div>
</div>
<div className="col-md-6">
<div className="register-page-txt color--white">
<span className="section-id">Start for free</span>

<h2 className="s-48 w-700">Create</h2>
<h2 className="s-48 w-700">an account</h2>

<p className="p-md mt-25">
Integer congue sagittis and velna augue egestas magna
suscipit purus aliquam
</p>

<div className="register-page-copyright">
<p className="p-sm">
&copy; 2023 Trisfusa. <span>All Rights Reserved</span>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</>
);
};

export default Registration;