@extends('master')

@section('content')

<div class="row">
    <div class="large-12 columns">
        <div class="row">
            <div class="small-12 medium-12 large-12 columns">
                <h4>Results Graphic</h4>
            </div>
        </div>
    </div>
</div>

<div class="row">
  <div class="small-1 medium-1 large-1 columns">
    <label style="background-color:#97bbcd">&nbsp;</label>
  </div>
  <div class="small-6 medium-6 large-4 end columns">
    <label>Cholinesterase RBC % inhibition</label>
  </div>
</div>
<div class="row">
  <div class="small-1 medium-1 large-1 columns">
    <label style="background-color:#97cda9">&nbsp;</label>
  </div>
  <div class="small-6 medium-6 large-4 end columns">
    <label>Cholinesterase Serum % inhibition</label>
  </div>
</div>
<div class="row">
    <div class="small-1 medium-1 large-1 columns">
        <label style="background-color:#FF0000">&nbsp;</label>
    </div>
    <div class="small-6 medium-6 large-4 end columns">
        <label>40% Serum removal threshold</label>
    </div>
</div>
<div class="row">
  <div class="small-1 medium-1 large-1 columns">
    <label style="background-color:#ff943d">&nbsp;</label>
  </div>
  <div class="small-6 medium-6 large-4 end columns">
    <label>30% RBC removal threshold</label>
  </div>
</div>
<div class="row">
  <div class="small-1 medium-1 large-1 columns">
    <label style="background-color:#ffcd19">&nbsp;</label>
  </div>
  <div class="small-6 medium-6 large-4 end columns">
    <label>20% Work practice investigation threshold</label>
  </div>
</div>

<div class="row" style="margin-top:50px; margin-bottom:50px;">
  <div class="small-12 medium-12 large-12 columns">
    <canvas id="canvas"></canvas>
  </div>
</div>


<div class="row">
  <div class="small-12 medium-4 large-4 columns">
    <a href="{{{URL::to('patients/' . $pid . '/results-review')}}}" class="button expand">Back</a>
  </div>
</div>





  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="{{{URL::to('lib/Chart.js')}}}"></script>

  <script type="text/javascript">

    var pid = ""

    //var url = 'http://localhost/ChE/ChE/public/graph';

    //var url = window.location.origin + '/ChE/ChE/public/graph';
    var url = '{{ URL::to('patients/' . $pid . '/results-review/graph/make') }}';
    // var url = window.location.origin + '/patients/{{$pid}}/results-review/graph/make';
    console.log(url);
    $.ajax({
      url: url,
      type: 'get',
      dataType: 'json',
      data: {
        pid: pid
      }

    }).done(function(response){
       
          var barChartData = {
            labels : response.labels,
            datasets : [
              {
                fillColor: "rgba(255, 255, 255, 0.6)",
                strokeColor: "#FF0000",
                pointColor: "#FF0000",
                pointStrokeColor: "#FF0000",
                pointHighlightFill: "#FF0000",
                pointHighlightStroke: "#FF0000",
                data : response.plasmaupper
              },
              {
                fillColor: "rgba(255, 255, 255, 0.6)",
                strokeColor: "#ffcd19",
                pointColor: "#ffcd19",
                pointStrokeColor: "#ffcd19",
                pointHighlightFill: "#ffcd19",
                pointHighlightStroke: "#ffcd19",
                data : response.plasmalower
              },
              {
                fillColor: "rgba(255, 255, 255, 0.6)",
                strokeColor: "#ff943d",
                pointColor: "#ff943d",
                pointStrokeColor: "#ff943d",
                pointHighlightFill: "#ff943d",
                pointHighlightStroke: "#ff943d",
                data : response.upperrbc
              },
              {
                fillColor: "rgba(151,187,205,0.2)",
                strokeColor: "rgba(151,187,205,1)",
                pointColor: "rgba(151,187,205,1)",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(151,187,205,1)",
                data : response.rbc
              },
              {
                fillColor: "rgba(20,220,220,0.2)",
                strokeColor: "rgba(8,88,88,1)",
                pointColor: "rgba(220,220,220,1)",
                pointStrokeColor: "#085858",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(220,220,220,1)",
                data : response.plasma
              }
            ]

          }

          //window.onload = function(){
            var ctx = document.getElementById("canvas").getContext("2d");
            window.myBar = new Chart(ctx).Line(barChartData, {
              responsive : true
            });
          //}

    }).fail(function(error){
      alert('Internal Server Error');
      console.log(error);
    });
    


  </script>

 @stop