<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/combine/npm/chart.js@2.9.3,npm/jquery@3.5.1,npm/@sasjs/adapter@4"></script> 
    <script>
      var sasJs = new SASjs.default({
         appLoc: "/Public/app/readme"
        ,serverType:"SAS9"
        ,debug: false
      });
      function initSasJs() {
        $('#loading-spinner').show()
        // instantiate sasjs with options such as backend app location
        // login (it's also possible to set an autologin when making requests)
        sasJs.logIn(
           $('#username')[0].value
          ,$('#password')[0].value
        ).then((response) => {
          if (response.isLoggedIn === true) {
            $('#loading-spinner').hide()
            $('.login').hide()
            $('#getdata').show()
            $('#cars').show()
          }
        })
      }
      function getData(){
        $('#loading-spinner').show()
        $('#myChart').remove();
        $('#chart-container').append('<canvas id="myChart" style="display: none;"></canvas>')
        // make a request to a SAS service
        var type = $("#cars")[0].options[$("#cars")[0].selectedIndex].value;
        // request data from an endpoint under your appLoc (missing opening slash implies relative path)
        sasJs.request("common/getdata", {
            // send data as an array of objects - each object is one row
            fromjs: [{ type: type }] 
        }).then((response) => {
          $('#myChart').show();
          var labels = []
          var data = []
          response.areas.map((d) => {
            labels.push(d.MAKE);
            data.push(d.AVPRICE);
          })
          $('#loading-spinner').hide()
          initGraph(labels, data, type);
        })
      }
      function initGraph(labels, data, type){
        var myCanvas = document.getElementById("myChart");
        var ctx = myCanvas.getContext("2d");
        var myChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: labels,
                datasets: [{
                    label: "Average Invoice Price in USD for " + type + " Cars by Manufacturer",
                    data: data,
                    backgroundColor: "rgba(255,99,132,0.2)",
                    borderColor: "rgba(255,99,132,1)",
                    borderWidth: 1,
                    hoverBackgroundColor: "rgba(255,99,132,0.4)",
                    hoverBorderColor: "rgba(255,99,132,1)",
                }]
            },
            options: {
                maintainAspectRatio: false,
                scales: {yAxes: [{ticks: {beginAtZero: true}}]}
            }
        });
      }
    </script>
    <meta charset="utf-8" http-equiv="X-UA-Compatible" content="IE=edge" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  </head>
  <body>
    <div class="container-fluid" style="text-align: center; margin-top: 10px;">
      <div class="row">
          <div class="col-lg-5 col-md-7 col-sm-10 mx-auto mx-auto">
          <h1>Demo Seed App for <span class="code">SASjs</span></h1>
          <div class="login" id="login-form">
            <div class="form-group">
              <input class="form-control" type="text" id="username" placeholder="Enter username" />
            </div>
            <div class="form-group">
              <input class="form-control" type="password" id="password" placeholder="Enter password" />
            </div>
            <button id="login" onclick="initSasJs()" class="login btn btn-primary" style="margin-bottom: 5px;">Log In</button>
          </div>
          <select name="cars" id="cars" style="margin-bottom: 5px; display: none;" class="form-control">
            <option value="Hybrid">Hybrid</option>
            <option value="SUV">SUV</option>
            <option value="Sedan">Sedan</option>
            <option value="Sports">Sports</option>
            <option value="Truck">Truck</option>
            <option value="Wagon">Wagon</option>
          </select>
          <button id="getdata" onclick="getData()" style="margin-bottom: 5px; display: none;" class="btn btn-success">Get Data</button><br><br>
          <div id="loading-spinner" class="spinner-border text-primary" role="status" style="display: none;">
            <span class="sr-only">Loading...</span>
          </div><br>
        </div>
      </div>
    </div>
    <div id="chart-container" style="height: 65vh; width: 100%; position: relative; margin: auto;">
      <canvas id="myChart" style="display: none;"></canvas>
    </div>
  </body>
</head>