<template>
  <Header />

  <div class="wrapper">
    <div class="flex">
      <div class="">
        <SideBar />
      </div>
      <div class=" w-full px-10 ">
        <div class="text-sm breadcrumbs">
          <ul>
            <li>
              <router-link :to="{ name: 'home' }">
                Home
              </router-link>
            </li>
            <li>
              <router-link :to="{ name: 'customer' }">
                Customers
              </router-link>
            </li>
          </ul>

          <div class=" w-full mt-10" v-if="loaded">
            <div class="grid grid-cols-12 gap-5 ">
              <div class="col-span-3 ">
                <img src="../../../assets/images/user_placeholder.png" alt="Drone Image" width="200" height="250" />
              </div>
              <div class="col-span-9">
                <div class="grid grid-cols-12">
                  <div class="col-span-12 font-bold flex justify-end">
                    <div class="btn btn-sm btn-accent">
                      <router-link :to="{ name: 'employeeEdit', params: { id: employee.id } }">
                        Edit Employee
                      </router-link>
                    </div>
                  </div>
                  <div class="col-span-12 font-bold flex">
                    {{ employee.employee_first_name }}
                    {{ employee.employee_last_name }}
                  </div>
                  <div class="col-span-12 font-bold flex">
                    {{ employee.employee_address }}
                    <div v-if="employee.employee_apt != 'None'">
                      {{ employee.employee_apt }}
                    </div>
                  </div>
                  <div class="col-span-12 font-bold flex">
                    <div class="pr-2">
                      {{ employee.employee_town }},
                    </div>

                    <div class="pr-2">
                      <div v-if="employee.employee_state == '0'">Massachusetts</div>
                      <div v-else-if="employee.employee_state == '1'">Rhode Island</div>
                      <div v-else-if="employee.employee_state == '2'">New Hampshire</div>
                      <div v-else-if="employee.employee_state == '3'">Maine</div>
                      <div v-else-if="employee.employee_state == '4'">Vermont</div>
                      <div v-else-if="employee.employee_state == '5'">Maine</div>
                      <div v-else-if="employee.employee_state == '6'">New York</div>
                      <div v-else>Unknown state</div>
                    </div>
                    <div class="pr-2">
                      {{ employee.employee_zip }}
                    </div>
                  </div>
                  <div class="col-span-12 font-bold flex" v-if="employee.employee_apt !== 'None'">
                    {{ employee.employee_apt }}
                  </div>
                  <div class="col-span-12 font-bold flex">
                    {{ employee.employee_phone_number }}
                  </div>
                  <div class="col-span-12 font-bold flex">
                    <div v-if="employee.employee_type == '0'">owner</div>
                    <div v-else-if="employee.employee_type == '1'">manager</div>
                    <div v-else-if="employee.employee_type == '2'">secretary</div>
                    <div v-else-if="employee.employee_type == '3'">office</div>
                    <div v-else-if="employee.employee_type == '4'">driver</div>
                    <div v-else-if="employee.employee_type == '5'">tech</div>
                    <div v-else-if="employee.employee_type == '6'">contract</div>
                    <div v-else-if="employee.employee_type == '7'">cash</div>
                    <div v-else-if="employee.employee_type == '8'">driver/tech</div>
                    <div v-else>Unknown employee type</div>
                  </div>
                </div>
              </div>
            </div>

            <div class="col-span-12 p-5 mt-5">
              <div class="grid grid-cols-12">
                <div class="col-span-12 font-bold flex text-2xl">
                  Delivery
                </div>
                <div class="col-span-6">
                  <div class="col-span-12 py-2">
                    Total Deliverys Done: {{ total_deliviers_done }}
                  </div>
                  <div class="col-span-12 py-2">
                    Total Gallons Delivered: {{ total_gallons_delivered }}
                  </div>
                  <div class="col-span-12 py-2">
                    Total Prime: {{ total_primes }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <Footer />
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import axios from 'axios'
import authHeader from '../../../services/auth.header'
import Header from '../../../layouts/headers/headerauth.vue'
import SideBar from '../../../layouts/sidebar/sidebar.vue'
import Footer from '../../../layouts/footers/footer.vue'


export default defineComponent({
  name: 'employeeProfile',

  components: {
    Header,
    SideBar,
    Footer,
  },

  data() {
    return {
      token: null,
      user_placeholder: '',
      user: null,
      loaded: false,
      employee: {
        id: '',
        employee_last_name: "",
        employee_first_name: "",
        employee_town: "",
        employee_address: "",
        employee_apt: "",
        employee_zip: "",
        employee_birthday: "",
        employee_phone_number: "",
        employee_start_date: "",
        employee_end_date: "",
        employee_type: '',
        employee_state: '',
      },
      total_deliviers_done: 0,
      total_gallons_delivered: 0,
      total_primes: 0,
    }
  },
  created() {
    this.userStatus()
  },
  mounted() {
    this.getEmployee(this.$route.params.id)
  },

  watch: {
    $route() {
      this.getEmployee(this.$route.params.id);
    },
  },
  methods: {
    getPage: function (page: any) {
      // we simulate an api call that fetch the records from a backend
      this.getEmployee(page)
    },
    userStatus() {
      let path = import.meta.env.VITE_BASE_URL + '/auth/whoami';
      axios({
        method: 'get',
        url: path,
        withCredentials: true,
        headers: authHeader(),
      })
        .then((response: any) => {
          if (response.data.ok) {
            this.user = response.data.user;
        
          }
        })
        .catch(() => {
          this.user = null
        })
    },

    getEmployee(userid: any) {
      let path = import.meta.env.VITE_BASE_URL + "/employee/" + userid;
      axios({
        method: "get",
        url: path,
        withCredentials: true,
        headers: authHeader(),
      })
        .then((response: any) => {
          if (response.data) {

            this.employee = response.data;
            if (this.employee.id){        
              this.getEmployeeStatsDeliveriesDone(this.employee.id)
              this.getEmployeeStatsGallonsDone(this.employee.id)
              this.getEmployeeStatsPrimesDone(this.employee.id)
            }

            this.loaded = true
            


          }
        })
    },
    getEmployeeStatsDeliveriesDone(userid: any) {
      let path = import.meta.env.VITE_BASE_URL + "/stats/delivery/total/" + userid;
      axios({
        method: "get",
        url: path,
        withCredentials: true,
        headers: authHeader(),
      })
        .then((response: any) => {
          if (response.data) {

            this.total_deliviers_done = response.data.data;

          }
        })
    },
    getEmployeeStatsGallonsDone(userid: any) {
      let path = import.meta.env.VITE_BASE_URL + "/stats/gallons/total/" + userid;
      axios({
        method: "get",
        url: path,
        withCredentials: true,
        headers: authHeader(),
      })
        .then((response: any) => {
          if (response.data) {
            this.total_gallons_delivered = response.data.data;

          }
        })
    },
    getEmployeeStatsPrimesDone(userid: any) {
      let path = import.meta.env.VITE_BASE_URL + "/stats/primes/total/" + userid;
      axios({
        method: "get",
        url: path,
        withCredentials: true,
        headers: authHeader(),
      })
        .then((response: any) => {
          if (response.data) {

            this.total_primes = response.data.data;

          }
        })
    },
  },
})
</script>

<style scoped></style>