<template>
    <div class="w-full xl:w-8/12 mb-12 xl:mb-0 px-4">
      <div class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded bg-blueGray-800">
        <div class="rounded-t mb-0 px-4 py-3 bg-transparent">
          <div class="flex flex-wrap items-center">
            <div class="relative w-full max-w-full flex-grow flex-1">
              <!-- <h6 class="uppercase text-blueGray-100 mb-1 text-xs font-semibold">
                Overview
              </h6> -->
              <h2 class="text-white text-xl font-semibold">
                Patients Survey ({{year}})
              </h2>
            </div>
          </div>
        </div>
        <div class="p-4 flex-auto">
          <!-- Chart -->
          <div class="relative" style="height:350px">
            <canvas id="line-chart"></canvas>
          </div>
        </div>
      </div>
    </div>
  </template>
  <script>
  import Chart from "chart.js";
  import ManagementService from "@/services/management.service";

  export default {

    data() {
      return {
        year: new Date().getFullYear(),
        newPatients: [],
        oldPatients: []

      };
    },
    async mounted() {
      const userId = JSON.parse(sessionStorage.getItem('user')).id;
      await ManagementService.statistic(userId).then(
        (response) => {
          this.newPatients = response[0];
          this.oldPatients = response[1];
        },
        (error) => {
          console.log(error);
        }
      );

      this.$nextTick(function() {
        var config = {
          type: "line",
          data: {
            labels: [
              "January",
              "February",
              "March",
              "April",
              "May",
              "June",
              "July",
              "August",
              "September",
              "October",
              "November",
              "December",
            ],
            datasets: [
              {
                label: 'New Patients',
                backgroundColor: "#4c51bf",
                borderColor: "#4c51bf",
                data: this.newPatients,
                fill: false
              },
              {
                label: 'Old Patients',
                fill: false,
                backgroundColor: "#ed64a6",
                borderColor: "#ed64a6",
                data: this.oldPatients
              }
            ]
          },
          options: {
            maintainAspectRatio: false,
            responsive: true,
            title: {
              display: false,
              text: "Sales Charts",
              fontColor: "white",
            },
            legend: {
              labels: {
                fontColor: "white"
              },
              align: "end",
              position: "bottom"
            },
            tooltips: {
              mode: "index",
              intersect: false
            },
            hover: {
              mode: "nearest",
              intersect: true
            },
            scales: {
              xAxes: [
                {
                  ticks: {
                    fontColor: "rgba(255,255,255,.7)"
                  },
                  display: true,
                  scaleLabel: {
                    display: false,
                    labelString: "Month",
                    fontColor: "white"
                  },
                  gridLines: {
                    display: false,
                    borderDash: [2],
                    borderDashOffset: [2],
                    color: "rgba(33, 37, 41, 0.3)",
                    zeroLineColor: "rgba(0, 0, 0, 0)",
                    zeroLineBorderDash: [2],
                    zeroLineBorderDashOffset: [2]
                  }
                }
              ],
              yAxes: [
                {
                  ticks: {
                    fontColor: "rgba(255,255,255,.7)"
                  },
                  display: true,
                  scaleLabel: {
                    display: false,
                    labelString: "Value",
                    fontColor: "white"
                  },
                  gridLines: {
                    borderDash: [3],
                    borderDashOffset: [3],
                    drawBorder: false,
                    color: "rgba(255, 255, 255, 0.15)",
                    zeroLineColor: "rgba(33, 37, 41, 0)",
                    zeroLineBorderDash: [2],
                    zeroLineBorderDashOffset: [2]
                  }
                }
              ]
            }
          }
        };
        var ctx = document.getElementById("line-chart").getContext("2d");
        window.myLine = new Chart(ctx, config);
      });
    }
  };
  </script>