<!DOCTYPE HTML>
<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one or more
  ~ contributor license agreements.  See the NOTICE file distributed with
  ~ this work for additional information regarding copyright ownership.
  ~ The ASF licenses this file to You under the Apache License, Version 2.0
  ~ (the "License"); you may not use this file except in compliance with
  ~ the License.  You may obtain a copy of the License at
  ~
  ~     http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="jquery-1.11.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
  </head>
  <body>
    <div class="container">

      <div class="col-md-1"></div>
      <div class="col-md-10">
        <h2 align="center">BMI Calculator</h2>

        <div class="form-group">
          <label for="height" class="col-form-label"><b>Height(cm):</b></label>
          <input type="number" class="form-control" id="height" name="height" placeholder="Please input your height">
        </div>
        <div class="form-group">
            <label for="weight" class="col-form-label"><b>Weight(kg):</b></label>
            <input type="number" class="form-control" id="weight" name="weight" placeholder="Please input your weight">
        </div>
        <button type="submit" class="btn btn-primary" id="submit">Submit</button>

        <br/>
        <div class="alert alert-light" role="alert" id="bmi">
          <h3>BMI Result: <span id="bmi_result"></span></h3>
          <h3>BMI Instance ID: <span id="bmi_instanceId"></span></h3>
          <h3>BMI Called Time: <span id="bmi_callTime"></span></h3>
        </div>
        <div class="alert alert-secondary" role="alert">
          <b>Note: </b>Range of healthy weight is between <b>18.5</b> and <b>24.9</b>.
        </div>
        <div id="error" class="alert alert-danger" role="alert"><p id="error_message"></p></div>
      </div>
    </div>

  </body>
  <script>
      $("#error").hide();
      $("#submit").click(function () {
        if ( !$("#height").val() || !$("#weight").val() ) {
          alert("Please input both the height and weight");
          return;
        }
        $.ajax({
          url: "/calculator/bmi?height=" + $("#height").val() + "&weight=" + $("#weight").val(),
          type: "GET",
          success: function (data) {
            $("#error").hide();
            $("#bmi_result").text(data.result);
            $("#bmi_instanceId").text(data.instanceId);
            $("#bmi_callTime").text(data.callTime);
            if ( data.result < 18.5 || (data.result < 30 && data.result >= 25) ) {
              $("#bmi").removeClass().addClass("alert").addClass("alert-warning");
            } else if ( data.result < 25 && data.result >= 18.5 ) {
              $("#bmi").removeClass().addClass("alert").addClass("alert-success");
            } else {
              $("#bmi").removeClass().addClass("alert").addClass("alert-danger");
            }
          },
          error: function (xhr) {
            $("#bmi").removeClass().addClass("alert").addClass("alert-light");
            $("#bmi_result").text('');
            if (xhr.responseText.length == 0) {
              $("#error_message").text("empty fallback called");
              $("#error").removeClass().addClass("alert").addClass("alert-success").show();
              return;
            }
            var resp = JSON.parse(xhr.responseText);
            if (xhr.status == 429) {
              $("#error_message").text(resp.message);
              $("#error").removeClass().addClass("alert").addClass("alert-danger").show();
            } else {
              $("#error_message").text(resp.error + ": " + resp.exception)
              $("#error").removeClass().addClass("alert").addClass("alert-danger").show();
            }
          }
        });
      });
    </script>

</html>