Notes

import React from 'react';
import './CalculatePremium.css';
import { useState } from "react"
import { Button, Link, Typography, Checkbox } from '@qbe/ui-core';
import Scrollup from '../../Assets/Icon/UpArrow.svg'
import Scrolldown from '../../Assets/Icon/DownArrow.svg'
import { Modal } from "../../Components/Modal/Modal.js"
import {
BrowserRouter as Router,
Routes,
Route,
Link as Link2,
useNavigate
} from "react-router-dom";
import ReviewPremium from '../ReviewPremium/ReviewPremium.js';
import { AddPolicy } from '../Modals/AddPolicy.js';
import { BackToPrevious } from '../Modals/BackToPrevious.js';
import { SaveForLater } from '../Modals/SaveForLater.js';
// import { SaveForLater } from '../Modals/SaveForLater.js';


export const CalculatePremium = ({ reviewPremium }) => {
const navigate = useNavigate();
const [isModalActive, setModalState] = useState(false);
const [isSuccessfull, setSuccessfull] = useState(false);
const [isHidden, setIsHidden] = useState(false);
const [isSaveForLater, setSaveForLater] = useState(false);

const toggleVisibility = () => {
setIsHidden(!isHidden);
};

function backToPrevious() {
return setModalState(true)
}
// const isSaveForLater=()=>{
// return setSaveForLater(false);

const setSuccessfullModalState = () => {
setModalState(false)
setSuccessfull(true);
}

return (
<>
<div className="calculate-premium-container">
<div className="calculate-premium-main">
<Modal shown={isModalActive}><BackToPrevious successfull={() => setSuccessfullModalState()} close={() => { setModalState(false) }} /></Modal>
<Modal shown={isSaveForLater}><SaveForLater close={() => { setSaveForLater(false) }} /></Modal>
<svg
xmlns="http://www.w3.org/2000/svg"
width="32"
height="32"
fill="#1D4FBB"
class="bi bi-arrow-left-short"
viewBox="0 0 19 19"
>
<path
fill-rule="evenodd"
d="M12 8a.5.5 0 0 1-.5.5H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5a.5.5 0 0 1 .5.5"
/>
</svg>
<Link onClick={() => navigate(-1)} sx={(theme) => ({
FontFace: "Inter-Medium",
fontSize: "16px",
// fontweight: "500",
// fontstyle: "Medium",
// letterSpacing: "0px",
// textalign: "left",
// lineHeight: "26px",
cursor: "pointer",
textDecoration: "none",
color: "#1D4FBB",
})}>Back to Policy Details</Link>
</div>
<div className='calculate-premium-header'>
<Typography variant="h1" className='calculate-premium-header-text'>
Calculate your premium
</Typography>
<Typography variant="h1" className='calculate-premium-company'>
Performance Services Pty Ltd - June 2024
</Typography>
</div>
<div className="premium-receipts-container">
<table className="premium-receipts-table">
<thead>
<tr>
<th><Typography variant="label2" className='premium-receipts-table-header'>Category</Typography></th>
<th><Typography variant="label2" className='premium-receipts-table-header'>Current Enrollment</Typography></th>
<th><Typography variant="label2" className='premium-receipts-table-header'>Prior Month Adjustment</Typography></th>
<th><Typography variant="label2" className='premium-receipts-table-header'>Final Unit</Typography></th>
<th><Typography variant="label2" className='premium-receipts-table-header'>Rate</Typography></th>
<th><Typography variant="label2" className='premium-receipts-table-header'>Premium</Typography></th>
</tr>
</thead>
<tbody>
<tr className='premium-receipts-table-row'>
<Typography variant="label2" className='premium-receipts-table-label'>
Specific Coverage
</Typography>
</tr>
<tr className='premium-receipts-table-data'>
<td><Typography variant="body1" className='premium-receipts-table-body'>Employee</Typography></td>
<td>
<input type='textbox' className='premium-receipts-table-textfield premium-receipts-table-body' value={"10"} />
</td>
<td>
<input type='textbox' className='premium-receipts-table-textfield premium-receipts-table-body' value={"0"} />

</td>
<td><Typography variant="label1" className='premium-receipts-table-body'>10</Typography></td>
<td><Typography variant="label1" className='premium-receipts-table-body'>$70</Typography></td>
<td><Typography variant="label1" className='premium-receipts-table-body'>$700.00</Typography></td>
</tr>
<tr className='premium-receipts-table-data'>
<td><Typography variant="body1" className='premium-receipts-table-body'>Family</Typography></td>
<td>
<input type='textbox' className='premium-receipts-table-textfield premium-receipts-table-body' value={"10"} />

</td>
<td>
<input type='textbox' className='premium-receipts-table-textfield premium-receipts-table-body' value={"0"} />
</td>
<td><Typography variant="label1" className='premium-receipts-table-body'>10</Typography></td>
<td><Typography variant="label1" className='premium-receipts-table-body'>$25.00</Typography></td>
<td><Typography variant="label1" className='premium-receipts-table-body'>$250.00</Typography></td>
</tr>
<tr className='premium-receipts-table-data'>
<td><Typography variant="body1" className='premium-receipts-table-body'>Third</Typography></td>
<td>
<input type='textbox' className='premium-receipts-table-textfield premium-receipts-table-body' value={"0"} />
</td>
<td>
<input type='textbox' className='premium-receipts-table-textfield premium-receipts-table-body' value={"0"} />
</td>
<td><Typography variant="label1" className='premium-receipts-table-body'>0</Typography></td>
<td><Typography variant="label1" className='premium-receipts-table-body'>$10.00</Typography></td>
<td><Typography variant="label1" className='premium-receipts-table-body'>$0.00</Typography></td>

</tr>
<tr className='premium-receipts-table-data'>
<td><Typography variant="body1" className='premium-receipts-table-body'>Forth</Typography></td>
<td>
<input type='textbox' className='premium-receipts-table-textfield premium-receipts-table-body' value={"0"} />
</td>
<td>
<input type='textbox' className='premium-receipts-table-textfield premium-receipts-table-body' value={"0"} />
</td>
<td><Typography variant="label1" className='premium-receipts-table-body'>0</Typography></td>
<td><Typography variant="label1" className='premium-receipts-table-body'>$10.00</Typography></td>
<td><Typography variant="label1" className='premium-receipts-table-body'>$0.00</Typography></td>
</tr>
<tr className='premium-receipts-table-row'>
<Typography variant="label2" className='premium-receipts-table-label'
// sx={(theme) => ({
// marginTop: "20px",
// marginLeft: "20px",
// textTransform: "uppercase",
// width: "max-content"
// })}
>
Aggregate Coverage
</Typography>
</tr>
<tr className='premium-receipts-table-data'>
<td><Typography variant="body1" className='premium-receipts-table-body'>Composite</Typography></td>
<td>
<input type='textbox' className='premium-receipts-table-textfield premium-receipts-table-body' value={"10"} />
</td>
<td>
<input type='textbox' className='premium-receipts-table-textfield premium-receipts-table-body' value={"0"} />
</td>
<td><Typography variant="label1" className='premium-receipts-table-body'>0</Typography></td>
<td><Typography variant="label1" className='premium-receipts-table-body'>$25.00</Typography></td>
<td><Typography variant="label1" className='premium-receipts-table-body'>$250.00</Typography></td>
</tr>
<tr className='premium-receipts-table-data'>
<td><Typography variant="body1" className='premium-receipts-table-body'>Aggregate Accomodation</Typography></td>
<td>
<input type='textbox' className='premium-receipts-table-textfield premium-receipts-table-body' value={"10"} />
</td>
<td>
<input type='textbox' className='premium-receipts-table-textfield premium-receipts-table-body' value={"0"} />
</td>
<td><Typography variant="label1" className='premium-receipts-table-body'>0</Typography></td>
<td><Typography variant="label1" className='premium-receipts-table-body'>$25.00</Typography></td>
<td><Typography variant="label1" className='premium-receipts-table-body'>$250.00</Typography></td>
</tr>
<tr className='premium-receipts-table-data'>
<td><Typography variant="body1" className='premium-receipts-table-body'>Third</Typography></td>
<td>
<input type='textbox' className='premium-receipts-table-textfield premium-receipts-table-body' value={"0"} />
</td>
<td>
<input type='textbox' className='premium-receipts-table-textfield premium-receipts-table-body' value={"0"} />
</td>
<td><Typography variant="label1" className='premium-receipts-table-body'>0</Typography></td>
<td><Typography variant="label1" className='premium-receipts-table-body'>$10.00</Typography></td>
<td><Typography variant="label1" className='premium-receipts-table-body'>$0.00</Typography></td>
</tr>
<tr className='premium-receipts-table-total'>
<td></td>
<td></td>
<td></td>
<td></td>
<td><Typography variant="body1" className='premium-receipts-table-sum'
// sx={(theme) => ({
// color: "#ffffff",
// })}
>Total</Typography></td>
<td><Typography variant="label1" className='premium-receipts-table-sum'

// sx={(theme) => ({
// color: "#ffffff",
// })}
>$8564.00</Typography></td>
</tr>
</tbody>
</table>
<table className="premium-summary-container">
<tr>
<Typography variant="h5" className='premium-summary-container-header'
sx={(theme) => ({
marginTop: "20px",
marginLeft: "20px",
})}
>
Monthly premium summary
</Typography>
</tr>
<tr>
<td className='premium-summary-container-row'><Typography variant="body1" className='premium-receipts-table-body'>Employee</Typography></td>
<td className='premium-summary-container-row'><Typography variant="label1" className='premium-receipts-table-body'>$700.00</Typography></td>
</tr>
<tr>
<td className='premium-summary-container-row'><Typography variant="body1" className='premium-receipts-table-body'>Family</Typography></td>
<td className='premium-summary-container-row'><Typography variant="label1" className='premium-receipts-table-body'>$250.00</Typography></td>
</tr>
<tr>
<td className='premium-summary-container-row'><Typography variant="body1" className='premium-receipts-table-body'>Composite</Typography></td>
<td className='premium-summary-container-row'><Typography variant="label1" className='premium-receipts-table-body'>$250.00</Typography></td>
</tr>
<tr>
<td className='premium-summary-container-row'><Typography variant="body1" className='premium-receipts-table-body'>Aggregate Accomodation</Typography></td>
<td className='premium-summary-container-row'><Typography variant="label1" className='premium-receipts-table-body'>$250.00</Typography></td>
</tr>
<tr>
<td className='premium-summary-container-row'><Typography variant="body1" className='premium-receipts-table-body'>Management fee</Typography></td>
<td className='premium-summary-container-row'><Typography variant="label1" className='premium-receipts-table-body'>$0.00</Typography></td>
</tr>
<hr className='hr-line-dashboard' />

<tr>
<td className={ 'premium-summary-container-row'}>
<Typography variant="label1" weight="semibold" className='premium-summary-container-deduction'
// sx={(theme) => ({
// marginTop: "20px"
// })}
>
Deductions
</Typography>
</td>
<td className='premium-summary-container-row'>
{isHidden ?
<img src={Scrolldown} className='calculate-premium-header-scroll'
onClick={toggleVisibility} /> :

<img src={Scrollup} className='calculate-premium-header-scroll'
onClick={toggleVisibility} />
}
</td>
</tr>
<tr className={isHidden ? 'hidden' : ''}>
<td className='premium-summary-container-row'><Checkbox id="chkPercentage" label="Percentage of Premium (15%)" name="chkPercentage" size="small" className='premium-receipts-table-body' /></td>
<td className='premium-summary-container-row'><Typography variant="label1" className='premium-receipts-table-body'>-$217.50</Typography></td>
</tr>
<tr className={isHidden ? 'hidden' : ''}>
<td className='premium-summary-container-row'><Checkbox id="chkEmployee" label="Employee (0.50/per employee%)" name="chkEmployee" size="small" className='premium-receipts-table-body' /></td>
<td className='premium-summary-container-row'><Typography variant="label1" className='premium-receipts-table-body'>-</Typography></td>
</tr>
<tr className={isHidden ? 'hidden' : ''}>
<td className='premium-summary-container-row'><Checkbox id="chkrate" label="Flat rate per month" name="chkrate" size="small" className='premium-receipts-table-body' /></td>
<td className='premium-summary-container-row'><Typography variant="label1" className='premium-receipts-table-body'>-</Typography></td>
</tr>
<hr className={isHidden ? 'hidden' : 'hr-line-dashboard'} />
<tr>
<td className='premium-summary-container-row'><Typography variant="body1" className='premium-receipts-table-body'>Gross premium</Typography></td>
<td className='premium-summary-container-row'><Typography variant="label1" className='premium-receipts-table-body'>$0.00</Typography></td>
</tr>
<tr>
<td className='premium-summary-container-row'><Typography variant="body1" className='premium-receipts-table-body'>Premium deductions</Typography></td>
<td className='premium-summary-container-row'><Typography variant="label1" className='premium-receipts-table-body'>$0.00</Typography></td>
</tr>
<tr>
<td className='premium-summary-container-row'><Typography variant="body1" className='premium-summary-container-deduction'>Net premium</Typography></td>
<td className='premium-summary-container-row'><Typography variant="label1" className='premium-summary-container-deduction'>$1,232.50</Typography></td>
</tr>
{/* <tr>
<td className='premium-summary-container-row'><Typography variant="h5" className='premium-summary-container-total'>Total Monthly</Typography></td>
<td className='premium-summary-container-row'><Typography variant="h5" className='premium-summary-container-total'>$1,232.50</Typography></td>
</tr> */}
<div>
{/* <Modal shown={isModalActive}><CalculatePremium successfull={() => setSuccessfullModalState()} close={() => { setModalState(false) }} /></Modal> */}
<div className='premium-receipts-table-button'>
<Button variant='secondary-on-light' onClick SaveForLater={() => SaveForLater()} label="Save for later" className='' />
<Link2 to="reviewpremium"> <Button variant='primary-on-light' label="Review & pay" className=''
// onClick={reviewPremium}
/></Link2>
</div>
</div>
</table>
</div>
</div>
</>
);
}
export default CalculatePremium;