<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name=""viewport" content=""width=device-width, initial-scale="1.0">
<title>Premium Calculator</title>
<meta name="description" content="Insurance premium calculator for pro-rata and short-rate calculations.">
<link rel="stylesheet" href="assets/style.css">
<link rel="icon" type="image/x-icon" href="assets/favicon.ico">
</head>
<body>
<header>
<h1>Premium Calculator</h1>
</header>
<main>
<div class="flex-container">
<div class="flex-1">
<h2>Policy Details</h2>
<table>
<tr>
<th><label for="effectiveDate">Effective date</label></th>
<td><input type="date" id="effectiveDate" name="effectiveDate" onblur="calculator()" min="0" oninput="validity.valid||(value='')"></td>
</tr>
<tr>
<th><label for="expiryDate">Expiry date:</label></th>
<td><input type="date" id="expiryDate" name="expiryDate" onblur="calculator()" min="0" oninput="validity.valid||(value='')"></td>
</tr>
<tr>
<th><label for="cancelDate">Cancellation date:</label></th>
<td><input type="date" id="cancelDate" name="cancelDate" onblur="calculator()" min="0" oninput="validity.valid||(value='')"></td>
</tr>
<tr>
<th><label for="totalPremium">Total premium:</label></th>
<td><input type="number" id="totalPremium" name="totalPremium" onblur="calculator()" min="0" oninput="validity.valid||(value='')"></td>
</tr>
<tr>
<th>Days in policy term:</th>
<td><span id="termDays">-</span></td>
</tr>
<tr>
<th>Days in force:</th>
<td><span id="forceDays">-</span></td>
</tr>
<tr>
<th>Days remaining:</th>
<td><span id="remainingDays">-</span></td>
</tr>
</table>
</div>
<div class="flex-2">
<h2>Factor Method</h2>
<div class="calcMethod">
<label for="calcProRata">
<input type="radio" name="calcMethod" id="calcProRata" value="Pro Rata" checked="checked" onclick="calculator();" >
<span>Pro Rata</span>
</label>
<label for="calcShortRate">
<input type="radio" name="calcMethod" id="calcShortRate" value="Short Rate" onclick="calculator();" >
<span>Short Rate</span>
</label>
</div>
<table>
<tr>
<td class="with-border"></td>
<th class="with-border">Earned</th>
<th class="with-border">Unearned</th>
</tr>
<tr>
<th class="with-border">Factor</th>
<td class="with-border"><span id="earnedFactor">-</span></td>
<td class="with-border"><span id="unearnedFactor">-</span></td>
</tr>
<tr>
<th class="with-border">Premium</th>
<td class="with-border"><span id="earnedPremium">-</span></td>
<td class="with-border"><span id="unearnedPremium">-</span></td>
</tr>
</table>
</div>
<div class="flex-3">
<h2>Premium Breakdown (Optional)</h2>
<blockquote><span id="checkMatch">Total breakdown: N/A</span></blockquote>
<table>
<tr>
<th>Coverage</th>
<th>Premium</th>
<th>Breakdown (%)</th>
<th>Earned Premium</th>
<th>Unearned Premium</th>
</tr>
<tr>
<td><label for="breakDO">D&O</label></td>
<td><input type="number" id="breakDO" name="breakDO" onblur="calculator()" min="0" oninput="validity.valid||(value='')"></td>
<td><span id="percentDO">-</span></td>
<td><span id="earnedDO">-</span></td>
<td><span id="unearnedDO">-</span></td>
</tr>
<tr>
<td><label for="breakEPL">EPL</label></td>
<td><input type="number" id="breakEPL" name="breakEPL" onblur="calculator()" min="0" oninput="validity.valid||(value='')"></td>
<td><span id="percentEPL">-</span></td>
<td><span id="earnedEPL">-</span></td>
<td><span id="unearnedEPL">-</span></td>
</tr>
<tr>
<td><label for="breakEO">E&O</label></td>
<td><input type="number" id="breakEO" name="breakEO" onblur="calculator()" min="0" oninput="validity.valid||(value='')"></td>
<td><span id="percentEO">-</span></td>
<td><span id="earnedEO">-</span></td>
<td><span id="unearnedEO">-</span></td>
</tr>
<tr>
<td><label for="breakCyber">Cyber</label></td>
<td><input type="number" id="breakCyber" name="breakCyber" onblur="calculator()" min="0" oninput="validity.valid||(value='')"></td>
<td><span id="percentCyber">-</span></td>
<td><span id="earnedCyber">-</span></td>
<td><span id="unearnedCyber">-</span></td>
</tr>
<tr>
<td><label for="breakLEI">Legal Expense</label></td>
<td><input type="number" id="breakLEI" name="breakLEI" onblur="calculator()" min="0" oninput="validity.valid||(value='')"></td>
<td><span id="percentLEI">-</span></td>
<td><span id="earnedLEI">-</span></td>
<td><span id="unearnedLEI">-</span></td>
</tr>
<tr>
<td><label for="breakCGL">CGL</label></td>
<td><input type="number" id="breakCGL" name="breakCGL" onblur="calculator()" min="0" oninput="validity.valid||(value='')"></td>
<td><span id="percentCGL">-</span></td>
<td><span id="earnedCGL">-</span></td>
<td><span id="unearnedCGL">-</span></td>
</tr>
<tr>
<td><label for="breakProperty">Property</label></td>
<td><input type="number" id="breakProperty" name="breakProperty" onblur="calculator()" min="0" oninput="validity.valid||(value='')"></td>
<td><span id="percentProperty">-</span></td>
<td><span id="earnedProperty">-</span></td>
<td><span id="unearnedProperty">-</span></td>
</tr>
<tr>
<td><label for="breakEB">Equipment Breakdown</label></td>
<td><input type="number" id="breakEB" name="breakEB" onblur="calculator()" min="0" oninput="validity.valid||(value='')"></td>
<td><span id="percentEB">-</span></td>
<td><span id="earnedEB">-</span></td>
<td><span id="unearnedEB">-</span></td>
</tr>
</table>
<div class="flex-4">
<button onClick="calculator()">Calculate</button>
</div>
</div>
</main>
<footer>
<select name="theme-select" id="theme-select">
<option value="light">Light</option>
<option value="dark">Dark</option>
<option value="summer">Summer</option>
<option value="slate">Slate</option>
<option value="tokyo">Tokyo</option>
<option value="solarized">Solarized</option>
<option value="forest">Forest</option>
</select>
<ul>
<li>Made by <a href="https://haothitran.com">Hao Tran</a>. View the project repository on <a href="https://forge.haothitran.com/KlazHTT/premium-calculator">Gitea</a> or <a href="https://github.com/KlazHTT/premium-calculator">Github</a>.</li>
<li>This calculator is intended for informational use only and does not constitute advice. </li>
<li>Calculations are rounded to the nearest hundredth. As such, there may be rounding discrepancies.</li>
<li>Date format is determined by browser and/or operating system settings.</li>
</ul>
</footer>
<script src="assets/calculator.js"></script>
<script src="assets/theme.js"></script>
</body>
</html>