Notes

"use client";
import React, {useState, useEffect} from "react";
import { useTranslation } from 'react-i18next';
import { apiUrl } from "@/app/constant/constant";
import Link from "next/link";


const Compare = () => {

const [compareData, setCompareData] = useState([]);
const [isChecked, setIsChecked] = useState(false);

const handleOnChange = () =>{
setIsChecked(!isChecked);
};


const { t } = useTranslation();

const requestQuotation = () => {}




const getCompareInfo = async() =>{
const itemIds = JSON.parse(localStorage.getItem("selectedProductItemsIds"));
// const obj = { prod_ids: itemIds};
const obj={
"prod_ids" : itemIds,
"lang": null
};

console.log("****Objectg****:",obj);

try {
const response = await fetch(`${apiUrl}api/product/list`, {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json' // Add this header for POST requests with JSON body
},
body: JSON.stringify(obj)
});

if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}

const data = await response.json();
setCompareData(data);
console.log("Response Data:", data);
} catch (error) {
console.error("Error fetching data:", error);
}


}


useEffect(() => {
getCompareInfo();

}, [])

return (
<div>
<section
className="banner"
style={{ backgroundImage: "url(assets/img/banner3.jpg)" }}
>
<div className="container">
<div className="row">
<div className="col-md-12">
<div className="banner-caption">
<h3>{t('Comparison')}</h3>
<ul className="breadcrumb">
<li>
<a href="/">{t('Start')}</a>
</li>
<li>{t('Comparison')}</li>
</ul>
</div>
</div>
</div>
</div>
</section>

<section className="comparemodal inner-page-hero" id="comparemodal">
<div className="container">
<div className="row justify-content-center">
<div className="col-md-8">
<div className="about-2-title mb-60 text-center wow fadeInUp">
<span className="section-id">Comparison</span>
<h2 className="s-52 mb-30">
We Have <span>Many Services</span> Currently
</h2>
<p className="mb-0 text-body">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Quaerat alias possimus vitae. Eveniet dicta voluptatem
voluptatibus soluta vero enim iusto maxime cum corrupti odio
nemo sed eaque velit, vitae similique!
</p>
</div>
</div>
</div>
</div>

<div className="container">
<div className="row">
<div className="col-md-12">
<div className="comparemodal-body">
<div className="table-wrapper table-responsive ratio_asos">
<table className="table table-compare">
<thead>
<tr>
<th>PRODUCTS</th>
<th>DETAILS</th>
<th>PRICE</th>
<th>PRODUCT CATEGORIES</th>
<th>COMPATIBILITY</th>
<th>CONNECTIVITY</th>
<th>MANUFACTURER</th>
<th>SELF-PROGRAMMING</th>
<th>Request Quote</th>
<th>DIRECT BUY FROM MANUFACTURER</th>
</tr>
</thead>
<tbody>
{compareData.map((product, index) => (
<tr key={index} className="table-product-details">
<td>
<div className="product-box">
<div className="product-image">
<button className="btn-remove">
<i className="jki jki-times-solid"></i>
</button>
<a className="w-100" href="#">
<img
src={product.imageSrc}
className="img-fluid bg-img"
alt=""
/>
</a>
</div>

<div className="product-details">
<button
type="button"
className="btn-close"
aria-label="Close"
></button>
</div>
</div>
</td>
<td>
<div className="product-title">
<a href="#">
<h6 className="truncate">{product.name}</h6>
</a>
</div>
<p className="content-color truncate-2">{product.description}</p>
<a className="theme-color" href="">
More Details...
</a>
</td>
<td>
<span className="font-light">{product.price}</span>
<del className="theme-color">{product.discountedPrice}</del>
</td>
<td><p>{product.productCategory}</p></td>
<td>{product.compatibility}</td>
<td>{product.connectivity}</td>
<td>{product.manufacturer}</td>
<td>{product.selfProgramming}</td>
<td>
<a>
<input type="checkbox"
id={`choose-${index}`}
name={`choose-${index}`}
value={`Product-${index}`}
checked={isChecked}
onChange={handleOnChange} />
{isChecked ? "checked" : "un-checked"}.
</a>
</td>
<td>
<a>
<button
className="btn btn-success btn-full"
onClick={requestQuotation}
>
Buy
</button>
</a>
</td>
</tr>
))}
</tbody>

</table>
</div>
</div>
</div>
</div>
</div>

</section>
</div>
);
};

export default Compare;