{% extends "layout.html" %}

{% block content %}
  
<div class="container" style="margin-top: 20px;">
    <div class="card">
        <div class="card-header text-center">
            <h4><b>Regression Analysis: Predict House Price</b></h4>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-8">
                    <div class="card">
                        <div class="card-header text-center"><h5><b>House Price Data Input</b></h5></div>
                        <form id="inputForm">
                        <div class="card-body">                            
                            <div class="row">
                                <div class="col-md-3">
                                    <label class="control-label">CRIM</label>
                                </div>
                                <div class="col-md-9">
                                    <input class="form-control" type="text" name="CRIM" id="crimInputBoxId" value = "0">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-3">
                                    <label class="control-label">ZN</label>
                                </div>
                                <div class="col-md-9">
                                    <input class="form-control" type="text" name="ZN" id="" value = "0">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-3">
                                    <label class="control-label">INDUS</label>
                                </div>
                                <div class="col-md-9">
                                    <input class="form-control" type="text" name="INDUS" id="" value = "0">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-3">
                                    <label class="control-label">CHAS</label>
                                </div>
                                <div class="col-md-9">
                                    <input class="form-control" type="text" name="CHAS" id="" value = "0">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-3">
                                    <label class="control-label">NOX</label>
                                </div>
                                <div class="col-md-9">
                                    <input class="form-control" type="text" name="NOX" id="" value = "0">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-3">
                                    <label class="control-label">RM</label>
                                </div>
                                <div class="col-md-9">
                                    <input class="form-control" type="text" name="RM" id="" value = "0">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-3">
                                    <label class="control-label">AGE</label>
                                </div>
                                <div class="col-md-9">
                                    <input class="form-control" type="text" name="AGE" id="" value = "0">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-3">
                                    <label class="control-label">DIS</label>
                                </div>
                                <div class="col-md-9">
                                    <input class="form-control" type="text" name="DIS" id="" value = "0">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-3">
                                    <label class="control-label">RAD</label>
                                </div>
                                <div class="col-md-9">
                                    <input class="form-control" type="text" name="RAD" id="" value = "0">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-3">
                                    <label class="control-label">TAX</label>
                                </div>
                                <div class="col-md-9">
                                    <input class="form-control" type="text" name="TAX" id="" value = "0">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-3">
                                    <label class="control-label">PT</label>
                                </div>
                                <div class="col-md-9">
                                    <input class="form-control" type="text" name="PT" id="" value = "0">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-3">
                                    <label class="control-label">B</label>
                                </div>
                                <div class="col-md-9">
                                    <input class="form-control" type="text" name="B" id="" value = "0">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-3">
                                    <label class="control-label">LSTAT</label>
                                </div>
                                <div class="col-md-9">
                                    <input class="form-control" type="text" name="LSTAT" id="" value = "0">
                                </div>
                            </div>
                            <div class="card-footer text-center">
                                <button type = "button" class="btn btn-info" onclick="getResult()" value = "submit" style="cursor: pointer;">Predict</button>
                            </div>
                        </div>
                    </form>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card">
                    <div class="card-header text-center"><h5><b>Prediction Result</b></h5></div>
                    <div class="card-body">
                        <div class="row">
                            Model Predicted house price is->&nbsp;&nbsp; <span style="color:red"><p id="result"></p></span>
                        </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    function getResult(){
        $("#progressBar").modal('show')
        $.ajax({
           type: "POST",
           url: "{{url_for('getResponseLinearReg')}}",
           data: $("#inputForm").serialize(), // serializes the form's elements.
           success: function(data)
           {
              $("#result").html(data); 
           },complete:function()
           {
            $("#progressBar").modal('hide')
           }
         });
    }
</script>

{% endblock %}