<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 ---------->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.8.1/css/bootstrap-slider.min.css" />
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.8.1/bootstrap-slider.min.js"></script>
<style>
.output-headers {
font-size: 165%;
}
.output-text{
font-size: 260%;
font-weight: bold;
color: #f7941e;
}
</style>
<script>
var cost_data = {
"678": {
"system-size": 1,
"costing": "1.6-1.85",
"roof-top-area": 100
},
"1392": {
"system-size": 2,
"costing": "2.45-2.6",
"roof-top-area": 200
},
"2106": {
"system-size": 3,
"costing": "2.75-3.05",
"roof-top-area": 250
},
"3633": {
"system-size": 5,
"costing": "3.90-4.30",
"roof-top-area": 500
},
"6066": {
"system-size": 8,
"costing": "6.05-6.80",
"roof-top-area": 750
},
"7651": {
"system-size": 10,
"costing": "7.40-8.00",
"roof-top-area": 1000
},
"9861": {
"system-size": 12.5,
"costing": "8.57-9.63",
"roof-top-area": 1250
},
"11717": {
"system-size": 15,
"costing": "10.50-11.80",
"roof-top-area": 1500
},
"14199": {
"system-size": 17.5,
"costing": "11.47-12.90",
"roof-top-area": 1750
},
"15784": {
"system-size": 20,
"costing": "14.00-15.00",
"roof-top-area": 2000
}
};
function getCostData(inbill) {
var minDiff = 9999999;
var key = "";
$.each(cost_data, function(ebill, costs) {
ebill = parseInt(ebill);
var tempDiff = Math.abs(inbill - ebill);
if (tempDiff < minDiff) {
minDiff = tempDiff;
key = ebill;
}
});
if (key != "") {
return cost_data[key];
}
}
$(function() {
$("#place").change(function() {
var city = $("#place").val();
if (city == "unavailable") {
$("#estimate-unavailable").css("display", "block");
$("#bengaluru-inputs").css("display", "none");
$("#op").hide();
} else if (city == "bengaluru") {
$("#estimate-unavailable").css("display", "none");
$("#bengaluru-inputs").css("display", "block");
}
});
$("#get-savings").click(function() {
var inbill = $("#inbill").val();
var outdata = getCostData(inbill);
//console.log(outdata);
$("#op-system-size").html(outdata["system-size"]);
$("#op-system-cost").html(outdata["costing"]);
$("#op-rooftop-area").html(outdata["roof-top-area"]);
$("#op").show();
});
});
</script>
<div class="container">
<div class="row">
<div class="col-md-2">
<div class="form-horizontal">
<div class="control-group form-inline">
<label for="place" class="control-label col-md-4">Place</label>
<div class="controls col-md-8">
<select class="form-control" id="place">
<option value="bengaluru">Bengaluru</option>
<option value="unavailable">Rest of India</option>
</select>
</div>
</div>
</div>
</div>
<div class="col-md-10" id="bengaluru-inputs">
<div class="row">
<div class="col-md-8">
<div class="form-horizontal">
<div class="control-group form-inline">
<label for="monthly-bill" class="control-label col-md-6">Monthly Electricity Bill:</label>
<div class="controls col-md-6">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-rupee"></i> </div>
<input type="number" id="inbill" name="monthly-bill" class="form-control " id="monthly-bill" placeholder="Total Amount" required=""> </div>
</div>
</div>
</div>
</div>
<div class="col-md-4 text-center center-block">
<button type="button" class="btn btn-primary" style="vertical-align: middle;" id="get-savings">Calculate Savings</button>
</div>
</div>
</div>
<div class="col-md-10 text-center" style="display:none;" id="estimate-unavailable"> Currently we don't estimate in other regions. Please drop us a mail or contact us directly. </div>
</div>
</div>
<br>
<br>
<div class="output-table" id="op" style="margin-top:4%; display:none;" class="tex-center center-block">
<div style="color:#8CC63F;font-size:larger;margin-bottom:2%">There you go!! Following is your best fit solar roof-top system specifications:</div>
<div class="row output-headers">
<div class="col-md-4 text-center">System Size </div>
<div class="col-md-4 text-center">Cost </div>
<div class="col-md-4 text-center">Rooftop Area </div>
</div>
<div class="row output-text">
<div class="col-md-4 text-center"><span id="op-system-size"> </span> kW</div>
<div class="col-md-4 text-center"><span class="fa fa-inr"> </span> <span id="op-system-cost"> </span> Lakhs</div>
<div class="col-md-4 text-center"><span id="op-rooftop-area"> </span> Sq. Ft.</div>
</div>
</div>
<div style="margin-top:3%;"></div>
