<template>
    <div class="relative bg-blueGray-100">
      <!-- Header -->
      <div class="relative bg-pink-600 md:pt-32 pb-32 pt-12">
        <div class="px-4 md:px-10 mx-auto w-full">
          <div>
            <!-- Card stats -->
            <div class="flex flex-wrap">
              <div class="w-full lg:w-6/12 xl:w-3/12 px-4">
                <div class="relative flex flex-col min-w-0 break-words bg-white rounded mb-6 xl:mb-0 shadow-lg">
                  <div class="flex-auto p-4">
                    <div class="flex flex-wrap">
                      <div class="relative w-full pr-4 max-w-full flex-grow flex-1">
                        <h5 class="text-blueGray-400 uppercase font-bold text-xs">
                          Total Patients
                        </h5>
                        <span class="font-semibold text-xl text-blueGray-700">
                          {{ totalPatient.length }}
                        </span>
                      </div>
                      <div class="text-white p-3 text-center inline-flex items-center justify-center w-12 h-12 mb-5 shadow-lg rounded-full bg-red-medium">
                        <i class="far fa-chart-bar"></i>
                      </div>
                    </div>
                      <p class="text-sm text-blueGray-400 mt-4">
                      <span v-if="totalPatient.length >= aMonthAgoPatientLength" class="text-emerald-500 mr-2">
                        <i class="fas fa-arrow-up"></i> {{ (totalPatient.length / aMonthAgoPatientLength * 100).toFixed(2) }}%
                      </span>
                      <span v-if="totalPatient.length < aMonthAgoPatientLength" class="text-emerald-500 mr-2">
                        <i class="fas fa-arrow-down"></i> {{ (totalPatient.length / aMonthAgoPatientLength * 100).toFixed(2) }}%
                      </span>
                      <span class="whitespace-nowrap">
                        Since last month
                      </span>
                    </p>
                  </div>
                </div>
              </div>
              <div class="w-full lg:w-6/12 xl:w-3/12 px-4">
                <div class="relative flex flex-col min-w-0 break-words bg-white rounded mb-6 xl:mb-0 shadow-lg">
                  <div class="flex-auto p-4">
                    <div class="flex flex-wrap">
                      <div class="relative w-full pr-4 max-w-full flex-grow flex-1">
                        <h5 class="text-blueGray-400 uppercase font-bold text-xs">
                          Today Patients
                        </h5>
                        <span class="font-semibold text-xl text-blueGray-700">
                          {{ todayPatient.length }}
                        </span>
                      </div>
                      <div class="text-white p-3 text-center inline-flex items-center justify-center w-12 h-12 mb-5 shadow-lg rounded-full bg-orange-medium">
                        <i class="fas fa-chart-pie"></i>
                      </div>
                    </div>
                    <p class="text-sm text-blueGray-400 mt-4">
                      <span v-if="todayPatient.length >= aWeekAgoPatientLength" class="text-red-500 mr-2">
                        <i class="fas fa-arrow-up"></i> {{ (todayPatient.length / aWeekAgoPatientLength * 100).toFixed(2) }}%
                      </span>
                      <span v-if="todayPatient.length < aWeekAgoPatientLength" class="text-red-500 mr-2">
                        <i class="fas fa-arrow-down"></i> {{ (todayPatient.length / aWeekAgoPatientLength * 100).toFixed(2) }}%
                      </span>
                      <span class="whitespace-nowrap">
                        Since last week
                      </span>
                    </p>
                  </div>
                </div>
              </div>
              <div class="w-full lg:w-6/12 xl:w-3/12 px-4">
                <div class="relative flex flex-col min-w-0 break-words bg-white rounded mb-6 xl:mb-0 shadow-lg">
                  <div class="flex-auto p-4">
                    <div class="flex flex-wrap">
                      <div class="relative w-full pr-4 max-w-full flex-grow flex-1">
                        <h5 class="text-blueGray-400 uppercase font-bold text-xs">
                          Today Appoinetments
                        </h5>
                        <span class="font-semibold text-xl text-blueGray-700">
                          {{ todayAppointment.length }}
                        </span>
                      </div>
                      <div class="text-white p-3 text-center inline-flex items-center justify-center w-12 h-12 mb-5 shadow-lg rounded-full bg-pink-medium">
                        <i class="fas fa-users"></i>
                      </div>
                    </div>
                    <p class="text-sm text-blueGray-400 mt-4">
                      <span class="text-orange-500 mr-2">
                        <!-- <i class="fas fa-arrow-down"></i>  -->
                      </span>
                      <span class="whitespace-nowrap">
                        
                      </span>
                    </p>
                  </div>
                </div>
              </div>
              <div class="w-full lg:w-6/12 xl:w-3/12 px-4">
                <div class="relative flex flex-col min-w-0 break-words bg-white rounded mb-6 xl:mb-0 shadow-lg">
                  <div class="flex-auto p-4">
                    <div class="flex flex-wrap">
                      <div class="relative w-full pr-4 max-w-full flex-grow flex-1">
                        <h5 class="text-blueGray-400 uppercase font-bold text-xs">
                          Today Operations
                        </h5>
                        <span class="font-semibold text-xl text-blueGray-700">
                          {{ (todayCompletion.length / todayPatient.length * 100).toFixed(2) }}%
                        </span>
                      </div>
                      <div class="text-white p-3 text-center inline-flex items-center justify-center w-12 h-12 mb-5 shadow-lg rounded-full bg-lightBlue-medium">
                        <i class="fas fa-percent"></i>
                      </div>
                    </div>
                    <p class="text-sm text-blueGray-400 mt-4">
                      <span class="text-emerald-500 mr-2">
                        <!-- <i class="fas fa-arrow-up"></i> 12% -->
                      </span>
                      <span class="whitespace-nowrap">
                        <!-- Since last month -->
                      </span>
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="px-4 md:px-10 mx-auto w-full -m-24">
        <div class="flex flex-wrap">
          <line-chart-component></line-chart-component>
          <bar-chart-component></bar-chart-component>
        </div>
        <div class="flex flex-wrap mt-4">
          <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 bg-white w-full mb-6 shadow-lg rounded">
              <div class="rounded-t mb-0 px-4 py-3 border-0">
                <div class="flex flex-wrap items-center">
                  <div class="relative w-full px-4 max-w-full flex-grow flex-1">
                    <h3 class="font-semibold text-base text-blueGray-700">
                      Todays Appointments
                    </h3>
                  </div>
                  <div class="relative w-full px-4 max-w-full flex-grow flex-1 text-right">
                    <button
                      class="bg-indigo-500 text-white active:bg-indigo-600 text-xs font-bold uppercase px-3 py-1 rounded outline-none focus:outline-none mr-1 mb-1"
                      type="button"
                      style="transition:all .15s ease"
                    >
                      See all
                    </button>
                  </div>
                </div>
              </div>
              <div class="block w-full overflow-x-auto">
                <!-- Projects table -->
                <table class="items-center w-full bg-transparent border-collapse">
                  <thead>
                    <tr>
                      <th class="px-6 bg-blueGray-50 text-blueGray-500 align-middle border border-solid border-blueGray-100 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left">
                        Patient Name
                      </th>
                      <th class="px-6 bg-blueGray-50 text-blueGray-500 align-middle border border-solid border-blueGray-100 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left">
                        Gender
                      </th>
                      <th class="px-6 bg-blueGray-50 text-blueGray-500 align-middle border border-solid border-blueGray-100 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left">
                        Last Visit
                      </th>
                      <th class="px-6 bg-blueGray-50 text-blueGray-500 align-middle border border-solid border-blueGray-100 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left">
                        Diseases
                      </th>
                      <th class="px-6 bg-blueGray-50 text-blueGray-500 align-middle border border-solid border-blueGray-100 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left">
                        Details
                      </th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr v-for="item in todayAppointment" :key="item.id">
                      <th class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left">
                        {{ item.patient.lastName + ' ' + item.patient.firstName }}
                      </th>
                      <td class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4">
                        {{ item.patient.sex == "0" ? 'male' : 'female' }}
                      </td>
                      <td class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4">
                        340
                      </td>
                      <td class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4">
                        <!-- <i class="fas fa-arrow-up text-emerald-500 mr-4"></i> -->
                        <div class="badge badge-secondary">{{ item.description }}</div>
                      </td>
                      <td class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4">
                        <button
                          class="bg-fuchsia-500 text-white active:bg-fuchsia-600 text-xs font-bold uppercase px-3 py-1 rounded outline-none focus:outline-none mr-1 mb-1"
                          type="button"
                          style="transition:all .15s ease"
                        >
                          Detail
                        </button>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
          <div class="w-full xl:w-4/12 px-4">
            <div class="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded">
              <div class="rounded-t mb-0 px-4 py-3 border-0">
                <div class="flex flex-wrap items-center">
                  <div class="relative w-full px-4 max-w-full flex-grow flex-1">
                    <h3 class="font-semibold text-base text-blueGray-700">
                      Patients Group
                    </h3>
                  </div>
                  <div class="relative w-full px-4 max-w-full flex-grow flex-1 text-right">
                    <button
                      class="bg-indigo-500 text-white active:bg-indigo-600 text-xs font-bold uppercase px-3 py-1 rounded outline-none focus:outline-none mr-1 mb-1"
                      type="button"
                      style="transition:all .15s ease"
                    >
                      See all
                    </button>
                  </div>
                </div>
              </div>
              <div class="block w-full overflow-x-auto">
                <!-- Projects table -->
                <table class="items-center w-full bg-transparent border-collapse">
                  <!-- <thead class="thead-light">
                    <tr>
                      <th class="px-6 bg-blueGray-50 text-blueGray-500 align-middle border border-solid border-blueGray-100 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left">
                        Referral
                      </th>
                      <th class="px-6 bg-blueGray-50 text-blueGray-500 align-middle border border-solid border-blueGray-100 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left">
                        Visitors
                      </th>
                      <th
                        class="px-6 bg-blueGray-50 text-blueGray-500 align-middle border border-solid border-blueGray-100 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left"
                        style="min-width:140px"
                      ></th>
                    </tr>
                  </thead> -->
                  <tbody>
                    <tr>
                      <th class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left">
                        Cholesterol
                      </th>
                      <td class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4">
                        1,480
                      </td>
                      <td class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4" style="min-width:140px">
                        <div class="flex items-center">
                          <span class="mr-2">60%</span>
                          <div class="relative w-full">
                            <div class="overflow-hidden h-2 text-xs flex rounded bg-red-200">
                              <div
                                style="width:60%"
                                class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-red-500"
                              ></div>
                            </div>
                          </div>
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <th class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left">
                        Diabetic
                      </th>
                      <td class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4">
                        5,480
                      </td>
                      <td class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4">
                        <div class="flex items-center">
                          <span class="mr-2">70%</span>
                          <div class="relative w-full">
                            <div class="overflow-hidden h-2 text-xs flex rounded bg-emerald-200">
                              <div
                                style="width:70%"
                                class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-emerald-500"
                              ></div>
                            </div>
                          </div>
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <th class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left">
                        Low Blood Pressure
                      </th>
                      <td class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4">
                        4,807
                      </td>
                      <td class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4">
                        <div class="flex items-center">
                          <span class="mr-2">80%</span>
                          <div class="relative w-full">
                            <div class="overflow-hidden h-2 text-xs flex rounded bg-purple-200">
                              <div
                                style="width:80%"
                                class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-purple-500"
                              ></div>
                            </div>
                          </div>
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <th class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left">
                        Hypertension
                      </th>
                      <td class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4">
                        3,678
                      </td>
                      <td class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4">
                        <div class="flex items-center">
                          <span class="mr-2">75%</span>
                          <div class="relative w-full">
                            <div class="overflow-hidden h-2 text-xs flex rounded bg-lightBlue-200">
                              <div
                                style="width:75%"
                                class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-lightBlue-500"
                              ></div>
                            </div>
                          </div>
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <th class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left">
                        Mental Disorder
                      </th>
                      <td class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4">
                        2,645
                      </td>
                      <td class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4">
                        <div class="flex items-center">
                          <span class="mr-2">30%</span>
                          <div class="relative w-full">
                            <div class="overflow-hidden h-2 text-xs flex rounded bg-orange-200">
                              <div
                                style="width:30%"
                                class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-emerald-500"
                              ></div>
                            </div>
                          </div>
                        </div>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>
<script>
import LineChartComponent from "@/components/chart/LineChart.vue";
import BarChartComponent from "@/components/chart/BarChart.vue";
import { useBoardsStore } from '@/store/boards.js';
import { useSystemStore } from '@/store/system.js';
import { usePatientsStore } from '@/store/patients.js';

import ManagementService from "@/services/management.service";

export default {
  name: "dashboard-page",
  components: {
    LineChartComponent,
    BarChartComponent
  },
  data() {
    return {
			boardsStore: useBoardsStore(),
			systemStore: useSystemStore(),
			patientsStore: usePatientsStore(),

      totalPatient: [],
      todayPatient: [],
      aWeekAgoPatientLength: 1,
      aMonthAgoPatientLength: 1,
      
      todayAppointment: [],
      todayCompletion: [],

		};
  },
  async mounted() {
    
		await this.patientsStore.load();
   
    this.totalPatient = this.patientsStore.getPatients
    // console.log(this.totalPatient);

    //  first
    const now = new Date();
    const aMonthAgo = new Date(now.getFullYear(), now.getMonth()-1, now.getDate());
    const aMonthAgoPatient = this.totalPatient.filter( (item) => new Date(item.createdAt).getTime() < aMonthAgo.getTime() );
    this.aMonthAgoPatientLength = aMonthAgoPatient.length === 0 ? 1 : aMonthAgoPatient.length;
    
    //  sencond
    const userId = JSON.parse(sessionStorage.getItem('user')).id;
    ManagementService.allLoad(userId).then(
      (response) => {
        // console.log(response);
        const now = new Date();
        this.todayPatient = response.filter( ( (item) => new Date(item.startdt).getFullYear() === now.getFullYear() ) &&
                                            ( (item) => new Date(item.startdt).getMonth() === now.getMonth() ) &&
                                            ( (item) => new Date(item.startdt).getDate() === now.getDate() ) );

        const aWeekAgo = new Date(now.getFullYear(), now.getMonth(), now.getDate()-7);
        const aWeekAgoPatient = response.filter( ( (item) => new Date(item.startdt).getFullYear() === aWeekAgo.getFullYear() ) &&
                                            ( (item) => new Date(item.startdt).getMonth() === aWeekAgo.getMonth() ) &&
                                            ( (item) => new Date(item.startdt).getDate() === aWeekAgo.getDate() ) );
        this.aWeekAgoPatientLength = aWeekAgoPatient.length === 0 ? 1 : aWeekAgoPatient.length;

        this.todayAppointment = this.todayPatient.filter( item => item.status === 'Appointment');
        this.todayCompletion = this.todayPatient.filter( item => item.status === 'Completion');

        // console.log(this.todayPatient);
        // console.log(aWeekAgoPatient);
      },
      (error) => {
        console.log(error);
      }
    );

    //  appointment table
    // await this.boardsStore.todayLoad();
    // this.todayAppointment = this.boardsStore.getCurrentBoard[0].tasks

	},
	unmounted(){
		this.systemStore.hideOverlay();
	},
};
</script>