.ecom-calc-container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f9f9f9;
border: 1px solid #e0e0e0;
border-radius: 8px;
}
.ecom-calc-header {
text-align: center;
margin-bottom: 30px;
}
.ecom-calc-header h2 {
color: #2c3e50;
margin-bottom: 10px;
}
.ecom-calc-row {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-bottom: 20px;
}
.ecom-calc-input-group {
flex: 1;
min-width: 250px;
}
.ecom-calc-input-group label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: #34495e;
}
.ecom-calc-input-group input {
width: 100%;
padding: 12px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 16px;
box-sizing: border-box;
transition: border-color 0.3s;
}
.ecom-calc-input-group input:focus {
border-color: #3498db;
outline: none;
}
.ecom-calc-btn {
width: 100%;
padding: 15px;
background-color: #3498db;
color: white;
border: none;
border-radius: 4px;
font-size: 18px;
font-weight: bold;
cursor: pointer;
transition: background-color 0.3s;
}
.ecom-calc-btn:hover {
background-color: #2980b9;
}
.ecom-results {
margin-top: 30px;
background-color: #fff;
padding: 20px;
border-radius: 4px;
border-left: 5px solid #3498db;
display: none;
}
.ecom-result-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid #eee;
}
.ecom-result-row:last-child {
border-bottom: none;
}
.ecom-result-label {
font-size: 16px;
color: #555;
}
.ecom-result-value {
font-size: 20px;
font-weight: bold;
color: #2c3e50;
}
.ecom-result-highlight {
font-size: 28px;
color: #e74c3c;
}
.ecom-article {
margin-top: 50px;
line-height: 1.6;
color: #333;
}
.ecom-article h3 {
margin-top: 25px;
color: #2c3e50;
}
.ecom-article ul {
margin-bottom: 20px;
}
.ecom-article li {
margin-bottom: 8px;
}
.calc-note {
font-size: 12px;
color: #7f8c8d;
margin-top: 5px;
}
function calculateReturnRate() {
var totalSalesInput = document.getElementById('totalSalesInput');
var returnedSalesInput = document.getElementById('returnedSalesInput');
var resultContainer = document.getElementById('resultContainer');
var rateResult = document.getElementById('rateResult');
var netSalesResult = document.getElementById('netSalesResult');
var retainedRateResult = document.getElementById('retainedRateResult');
var statusResult = document.getElementById('statusResult');
var totalSales = parseFloat(totalSalesInput.value);
var returnedSales = parseFloat(returnedSalesInput.value);
// Reset styles
resultContainer.style.display = 'none';
totalSalesInput.style.borderColor = '#ddd';
returnedSalesInput.style.borderColor = '#ddd';
// Validation
if (isNaN(totalSales) || totalSales <= 0) {
totalSalesInput.style.borderColor = '#e74c3c';
alert("Please enter a valid Total Gross Sales amount greater than 0.");
return;
}
if (isNaN(returnedSales) || returnedSales totalSales) {
returnedSalesInput.style.borderColor = '#e74c3c';
alert("Returns cannot be higher than Total Sales.");
return;
}
// Calculation Logic
var returnRate = (returnedSales / totalSales) * 100;
var netSales = totalSales – returnedSales;
var retainedRate = 100 – returnRate;
// Determine Status
var statusMessage = "";
var statusColor = "#2c3e50";
if (returnRate <= 10) {
statusMessage = "Excellent (Below 10%)";
statusColor = "#27ae60";
} else if (returnRate <= 20) {
statusMessage = "Average (10% – 20%)";
statusColor = "#f39c12";
} else if (returnRate <= 30) {
statusMessage = "High (20% – 30%) – Common for Apparel";
statusColor = "#d35400";
} else {
statusMessage = "Critical (Above 30%) – Audit Required";
statusColor = "#c0392b";
}
// Display Results
rateResult.innerHTML = returnRate.toFixed(2) + "%";
rateResult.style.color = statusColor;
// Formatting numbers for display
netSalesResult.innerHTML = netSales.toLocaleString(undefined, {minimumFractionDigits: 0, maximumFractionDigits: 2});
retainedRateResult.innerHTML = retainedRate.toFixed(2) + "%";
statusResult.innerHTML = statusMessage;
statusResult.style.color = statusColor;
statusResult.style.fontWeight = "bold";
resultContainer.style.display = 'block';
}