<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="col-sm-12">
<form class="form-horizontal form-pricing" role="form">
<div class="price-slider">
<h4 class="great">Annual revenue ($M)</h4>
<span>Minimum $100K is required</span>
<div class="col-sm-9">
<div id="slider_amirol1"></div>
</div>
<div class="col-sm-3">
<input id="input1" class="form-control form-control-lg input-right" type="text" value="750000" onchange="this.value=addCommas(this.value);calculate()">
</div>
</div>
<div class="price-slider">
<h4 class="great">Number of clerks managing AR invoices</h4>
<span>Minimum $100K is required</span>
<div class="col-sm-9">
<div id="slider_amirol2"></div>
</div>
<div class="col-sm-3">
<input id="input2" class="form-control form-control-lg input-right" type="text" value="14" onchange="this.value=addCommas(this.value);calculate()">
</div>
</div>
<div class="price-slider">
<h4 class="great">AR clerk average annual salary (in $K)</h4>
<span>Minimum $100K is required</span>
<div class="col-sm-9">
<div id="slider_amirol3"></div>
</div>
<div class="col-sm-3">
<input id="input3" class="form-control form-control-lg input-right" type="text" value="10K" onchange="this.value=addCommas(this.value);calculate()">
</div>
</div>
<div class="price-slider">
<h4 class="great">Percentage of paper invoices</h4>
<span>Minimum $100K is required</span>
<div class="col-sm-9">
<div id="slider_amirol4"></div>
</div>
<div class="col-sm-3">
<input id="input4" class="form-control form-control-lg input-right" type="text" value="40" onchange="calculate()">
</div>
</div>
<div class="row">
<div class="col-sm-6">
<h2>Annual saving from B2B automation</h2>
</div>
<div class="col-sm-3">
<input class="form-control-lg" name="totalprice12" type="text" id="total" style="" />
</div>
<div class="col-sm-3">
<button type="button" class="btn btn-success">See how we do it !</button>
</div>
</div>
</div>
</form>
</div>
</div>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
body {
padding-top: 60px;
}
.price-box {
margin: 0 auto;
background: #E9E9E9;
border-radius: 10px;
padding: 40px 15px;
/*width: 500px;*/
}
.ui-widget-content {
border: 1px solid #bdc3c7;
background: #e1e1e1;
color: #222222;
margin-top: 4px;
}
.ui-slider .ui-slider-handle {
position: absolute;
z-index: 2;
width: 7.2em;
height: 2.7em;
cursor: default;
margin: 0 -40px auto !important;
text-align: center;
line-height: 30px;
color: #FFFFFF;
font-size: 12px;
}
.ui-slider .ui-slider-handle .glyphicon {
color: #FFFFFF;
margin: 0 1px;
font-size: 11px;
opacity: 0.7;
}
.ui-corner-all {
border-radius: 20px;
}
.ui-slider-horizontal .ui-slider-handle {
top: -.9em;
}
.ui-state-default,
.ui-widget-content .ui-state-default {
border: 1px solid #f9f9f9;
background: #3498db;
}
.ui-slider-horizontal .ui-slider-handle {
margin-left: -0.5em;
}
.ui-slider .ui-slider-handle {
cursor: pointer;
}
.ui-slider a,
.ui-slider a:focus {
cursor: pointer;
outline: none;
}
.price, .lead p {
font-weight: 600;
font-size: 32px;
display: inline-block;
line-height: 60px;
border:0;
width: 245px;
}
h4.great {
margin: 0 0 25px -60px;
padding: 7px 15px;
font-size: 18px;
display: inline-block;
}
.total {
border-bottom: 1px solid #7f8c8d;
/*display: inline;
padding: 10px 5px;*/
position: relative;
padding-bottom: 20px;
}
.total:before {
content: "";
display: inline;
position: absolute;
left: 0;
bottom: 5px;
width: 100%;
height: 3px;
background: #7f8c8d;
opacity: 0.5;
}
.price-slider {
margin-bottom: 70px;
}
.price-slider span {
font-weight: 200;
display: inline-block;
color: #7f8c8d;
font-size: 13px;
}
.form-pricing {
background: #ffffff;
padding: 20px;
border-radius: 4px;
}
.price-form {
background: #ffffff;
margin-bottom: 10px;
padding: 20px;
border: 1px solid #eeeeee;
min-height: 520px;
border-radius: 4px;
/*-moz-box-shadow: 0 5px 5px 0 #ccc;
-webkit-box-shadow: 0 5px 5px 0 #ccc;
box-shadow: 0 5px 5px 0 #ccc;*/
}
.form-group {
margin-bottom: 0;
}
.form-group span.price {
font-weight: 200;
display: inline-block;
color: #7f8c8d;
font-size: 14px;
}
.help-text {
display: block;
margin-top: -10px;
margin-bottom: 10px;
color: #737373;
/*position: absolute;*/
/*margin-left: 20px;*/
font-weight: 200;
/*text-align: right;*/
width: 188px;
}
.price-form label {
font-weight: 200;
font-size: 21px;
}
img.payment {
display: block;
margin-left: auto;
margin-right: auto
}
.input-right {
margin-top:-10px;
background: url("https://cdn0.iconfinder.com/data/icons/shift-free/32/Currency_dollar-16.png") no-repeat scroll 7px 7px;
padding-left:30px;
}
.ui-slider-range-min {
background: #2980b9;
}
.active-month,
.active-term {
background: #3276b1;
}
/* HR */
hr.style {
margin-top: 0;
border: 0;
border-bottom: 1px dashed #ccc;
background: #999;
}
.ui-state-default, .ui-widget-content .ui-state-default{
background:#4B8137;
}
// JavaScript Document
var R = { 0: "100M",1: "200M",2: "300M",3: "400M",4: "500M",5: "750M",6: "1B",7: "1,5B",8: "2B",9: "3B",10: "4B",11: "5B",12: "7B",13: "10B", };
var clerks = { 0: "1", 1: "2", 2: "3", 3: "4",4: "5",5: "6",6: "7",7: "8",8: "9",9: "10",10: "11",11: "12",12: "13",13: "14",14: "15",15: "16",16: "17",17: "18",18: "19",19: "20", }
var salary = {0: "10K",1: "20K",2: "30K",3: "40K",4: "50K",5: "60K",6: "70K",7: "80K",8: "90K",9: "100K",};
var percentage = {0: "0%",1: "10%",2: "20%",3: "30%",4: "40%",5: "50%",6: "60%",7: "70%",8: "80%",9: "90%", 10: "100%",};
//------Hypothesis ---------------
var minDSOReductionDays = 2; //B20
var extraDSOReductionDaysPaperInvoices = 3; //B21
var costOfCapital = 0.05; //B22
var minFTEReductionFactor = 0.30; //B23
var extraFTEReductionFactorPaperInvoices = 0.45; //B24
//----------
//------ Hidden computation, initialize --------
var dayDSO = 0;
var DSOReductionDays = 0;
var DSOSavings = 0;
var clerkCost = 0;
var FTEReductionFactor = 0;
var FTESavings = 0;
var ITSavings = 50000;
// --------------------------------
$(document).ready(function() {
//$("#total").val("10000");
$("#slider_amirol1").slider({
range: "min",
animate: true,
min: 0,
max: 13,
step: 1,
value: 5,
slide:
function(event, ui)
{
update(1,ui.value,R); //changed
//calcualtePrice(ui.value);
}
});
$("#slider_amirol2").slider({
range: "min",
animate: true,
min: 0,
max: 19,
step: 1,
value: 10,
slide:
function(event, ui)
{
update(2,ui.value,clerks); //changed
//calcualtePrice(ui.value);
}
});
$("#slider_amirol3").slider({
range: "min",
animate: true,
min: 0,
max: 9,
step: 1,
value: 4,
slide:
function(event, ui)
{
update(3,ui.value,salary); //changed
//calcualtePrice(ui.value);
}
});
$("#slider_amirol4").slider({
range: "min",
animate: true,
min: 0,
max: 10,
step: 1,
value: 4,
slide:
function(event, ui)
{
update(4,ui.value,percentage); //changed
//calcualtePrice(ui.value);
}
});
update(1,5,R);
update(2,10,clerks);
update(3,4,salary);
update(4,4,percentage);
//calcualtePrice();
});
function update(slider,val,values) {
if(undefined === val) val = 0;
var amount = values[val];
//$('#sliderVal').val(val);
$('#slider_amirol'+slider+' a').html('<label><span class="glyphicon glyphicon-chevron-left"></span> '+amount+' <span class="glyphicon glyphicon-chevron-right"></span></label>');
$('#input'+slider).val(translateNumber(amount));
calculate();
}
function calculate(){
var annualRevenue = translateNumber($('#input1').val(),false); //B2
var clerks = translateNumber($('#input2').val(),false); //B3
var clerkSalary = translateNumber($('#input3').val(),false); //B4
var percentagePaper = translateNumber($('#input4').val(),false)/100; //B5
dayDSO = ((annualRevenue*costOfCapital)/365);
DSOReductionDays = minDSOReductionDays+ (extraDSOReductionDaysPaperInvoices*percentagePaper);
DSOSavings = dayDSO*DSOReductionDays;
clerkCost = clerks*clerkSalary;
FTEReductionFactor = minFTEReductionFactor + (extraFTEReductionFactorPaperInvoices*percentagePaper);
FTESavings = clerkCost * FTEReductionFactor;
var total = (Math.round(DSOSavings+FTESavings+ITSavings));
$('#total').val(addCommas(total));
}
function addCommas(nStr)
{
nStr += '';
x = nStr.split('.');
x1 = x[0];
x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1)) {
x1 = x1.replace(rgx, '$1' + ',' + '$2');
}
return x1 + x2;
}
function translateNumber(n,withComma = true){
if (n.indexOf('B')!=-1){
n = n.replace('B','');
n = n.replace(',','.');
n = Number(n) * 1000000000;
}
else if (n.indexOf('M')!=-1){
n = n.replace('M','');
n = n.replace(',','.');
n = Number(n) * 1000000;
}
else if (n.indexOf('K')!=-1){
n = n.replace('K','');
n = n.replace(',','.');
n = Number(n) * 1000;
}
else if (n.indexOf('%')!=-1){
n = n.replace('%','');
}
if (withComma) {n = addCommas(n);}
else {var regex = new RegExp(',', 'g'); n = n.toString().replace(regex,'');}
return n;
}
