{currentStep === 2 && (
<div className="step-2-content">
<h1 className="selection-title">
{countType === "kit" ? "Please Enter No. of Kits" : "Please Enter No. of Tests"}
</h1>
<p className="selection-subtitle">
{countType === "kit" ? "Provide the number of reagent kits for the selected products used in the preceding calendar year." : "Provide the number of tests for the selected products used in the preceding calendar year."}
</p>

<div className="accordion" id="productAccordion">
{selectedProducts.map((section, parentIndex) => (
<div className="accordion-item product-card" key={parentIndex}>
<h2 className="accordion-header reach-it-btnheader">
<button
className="accordion-button reach-it-accordionbtn"
type="button"
onClick={() => handleToggle(parentIndex)}
aria-expanded={expanded[parentIndex]}
>
{section.parent}
<span className="expand-icon ms-2">{expanded[parentIndex] ? "-" : "+"}</span>
</button>
</h2>
<div className={`accordion-collapse collapse ${expanded[parentIndex] ? "show" : ""}`} aria-labelledby={`accordion${parentIndex}`}>
<div className="accordion-body">
<table className="table product-table">
<thead>
<tr>
<th>Product</th>
<th>Product Family</th>
<th>List No.</th>
{countType === "kit" ? (
<>
<th>Tests per Kit</th>
<th>No. of Reagent Kits</th>
</>
) : (
<th>Tests</th>
)}
</tr>
</thead>
<tbody>
{section.products.map((product, productIndex) => (
<React.Fragment key={productIndex}>
<tr>
<td>{product.name}</td>
<td>{product.family}</td>
<td>{product.listNo}</td>
{countType === "kit" ? (
<>
<td>{product.testsPerKit}</td>
<td>
<input
type="number"
placeholder="Enter number of kits"
value={product?.kitCount || ""}
onChange={(e) => handleKitCountChange(parentIndex, productIndex, e.target.value)}
className={`form-control ${
blankFields.some(
(field) =>
field.parentIndex === parentIndex &&
field.productIndex === productIndex &&
field.type === "kit"
)
? "input-error"
: ""
}`}
/>
</td>
</>
) : (
<td>
<input
type="number"
className={`form-control ${
blankFields.some(
(field) =>
field.parentIndex === parentIndex &&
field.productIndex === productIndex &&
field.type === "test"
)
? "input-error"
: ""
}`}
placeholder="Enter number of tests"
value={product?.testCount || ""}
onChange={(e) => handleTestCountChange(parentIndex, productIndex, e.target.value)}
/>
</td>
)}
</tr>
{countType === "kit" &&
product.kits.map((kit, kitIndex) => {
const isBlank = blankFields.some(
(field) =>
field.parentIndex === parentIndex &&
field.productIndex === productIndex &&
field.kitIndex === kitIndex &&
field.type === "kit"
);
return (
<tr key={`${productIndex}-${kitIndex}`}>
<td></td>
<td></td>
<td>{kit.listSaleSize}</td>
<td>{kit.testsPerKit}</td>
<td>
<input
type="number"
placeholder="Enter number of kits"
value={kit?.reagentKits || ""}
onChange={(e) =>
handleKitCountChange(parentIndex, productIndex, kitIndex, e.target.value)
}
className={`form-control ${isBlank ? "input-error" : ""}`}
/>
</td>
</tr>
);
})}
</React.Fragment>
))}
</tbody>
</table>
</div>
</div>
</div>
))}
</div>
{showWarning && (
<div className="warning-message mt-3">
<p className="text-danger">
Please note that there are some fields left blank. To proceed, you must acknowledge this by checking the box below.
</p>
<div className="form-check">
<input
type="checkbox"
className="form-check-input"
id="acknowledgeWarning"
checked={isWarningCheckboxChecked}
onChange={(e) => setIsWarningCheckboxChecked(e.target.checked)}
/>
<label className="form-check-label" htmlFor="acknowledgeWarning">
I understand that some fields are blank.
</label>
</div>
</div>
)}
<div className="button-group mt-3">
<button className="btn btn-secondary" onClick={() => setCurrentStep(1)}>
Back
</button>
{currentStep === 2 && <button className="btn btn-secondary" onClick={generatePdf}>Download PDF</button>}
</div>
<div className="button-group mt-3 btnst">
<button className="btn btn-secondary ms-2 btncancel" onClick={handleCancel}>
Cancel
</button>
<button className="btn btn-primary btnproceed" disabled={showWarning && !isWarningCheckboxChecked} onClick={handleProceed}>
Proceed
</button>
</div>
</div>
)}