<template>
  <div class="flex">
    <div class="w-full px-4 md:px-10 ">
      <!-- Breadcrumbs & Welcome Header -->
      <div class="text-sm breadcrumbs">
        <ul>
          <li><router-link :to="{ name: 'home' }">Home</router-link></li>
        </ul>
      </div>
      <h1 class="text-3xl font-bold mt-4">
        Welcome, {{ employee.employee_first_name }}!
      </h1>

      <!-- Main Dashboard Grid -->
      <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6 my-6">
        
        <!-- Card 1: Today's Stats -->
        <div class="bg-neutral rounded-lg p-5 xl:col-span-2">
          <h3 class="text-xl font-bold mb-4">Today's Stats</h3>
          <div class="space-y-4">
            <div>
              <span class="font-semibold">Total Deliveries Today:</span>
              <span class="text-lg ml-2">{{ delivery_count }}</span>
            </div>
            <div>
              <div class="flex justify-between text-sm mb-1">
                <span>Completed</span>
                <span>{{ delivery_count_delivered }} / {{ delivery_count }}</span>
              </div>
              <progress class="progress progress-primary w-full" :value="delivery_count_delivered" :max="delivery_count"></progress>
            </div>
          </div>
        </div>

        <!-- Card 2: Today's Oil Price -->
        <div class="bg-neutral rounded-lg p-5">
          <h3 class="text-xl font-bold mb-4">Today's Oil Price</h3>
          <div class="space-y-2">
            <div class="flex justify-between">
              <span>Price / Gallon:</span>
              <span class="font-mono">${{ today_oil_price }}</span>
            </div>
            <div class="flex justify-between">
              <span>Same Day Fee:</span>
              <span class="font-mono">${{ price_same_day }}</span>
            </div>
            <div class="flex justify-between">
              <span>Prime Fee:</span>
              <span class="font-mono">${{ price_prime }}</span>
            </div>
            <div class="flex justify-between">
              <span>Emergency Fee:</span>
              <span class="font-mono">${{ price_emergency }}</span>
            </div>
          </div>
        </div>

        <!-- Card 2: Today's Oil Price -->
        <div class="bg-neutral rounded-lg p-5">
          <h3 class="text-xl font-bold mb-4">Service Price</h3>
          <div class="space-y-2">
            <div class="flex justify-between">
              <span>Price / Hour:</span>
              <span class="font-mono">$125</span>
            </div>
            <div class="flex justify-between">
              <span>Price / Emergency:</span>
              <span class="font-mono">$200</span>
            </div>
           
          </div>
        </div>

      
        
        <!-- Card 4: This Week's Stats -->
        <div class="bg-neutral rounded-lg p-5 xl:col-span-4">
          <h3 class="text-xl font-bold mb-4">This Week's Stats</h3>
          <div class="stats stats-vertical lg:stats-horizontal shadow bg-base-100 w-full">
            <div class="stat">
              <div class="stat-title">Total Deliveries</div>
              <div class="stat-value">{{ total_deliveries }}</div>
              <div class="stat-desc">In the last 7 days</div>
            </div>
            <div class="stat">
              <div class="stat-title">Total Gallons</div>
              <div class="stat-value">{{ total_gallons_past_week }}</div>
              <div class="stat-desc">Delivered this week</div>
            </div>
            <div class="stat">
              <div class="stat-title">Total Profit</div>
              <div class="stat-value text-success">${{ total_profit_past_week }}</div>
              <div class="stat-desc">Estimated earnings</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: 'Home',

  components: {
    Header,
    SideBar,
    Footer,
  },
  props: {
        clickCount: Number
    },
  data() {
    return {
      token: null,
      call_count:0,
      delivery_count: 0,
      delivery_count_delivered: 0,
      price_from_supplier: 0,
      today_oil_price: 0,
      price_for_employee: 0,
      price_same_day: 0,
      price_prime: 0,
      price_emergency: 0,
      user: {
        user_id: 0,
        user_name: '',
      },
      employee: {
        id: '',
        user_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_gallons_past_week: 0,
      total_profit_past_week: 0,
      total_deliveries: 0,


      loaded: false,

    }
  },

  created() {
    this.userStatus()
    this.today_delivery_count()
    this.today_delivery_delivered()
    this.today_price_oil()
    this.totalgallonsweek()
    this.totalprofitweek()



  },
  methods: {
    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;
            this.employeeStatus()
          } else {

            localStorage.removeItem('user');
            this.$router.push('/login');
          }
        })

    },

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

        })
    },
    totalprofitweek() {
      let path = import.meta.env.VITE_BASE_URL + '/money/profit/week';
      axios({
        method: "get",
        url: path,
        withCredentials: true,
        headers: authHeader(),
      })
        .then((response: any) => {
          this.total_profit_past_week = response.data.total_profit;
          this.total_deliveries = response.data.total_deliveries;

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

        })
    },
    total_calls() {
      let path = import.meta.env.VITE_BASE_URL + '/stats/call/count/today'
      axios({
        method: "get",
        url: path,
        withCredentials: true,
        headers: authHeader(),
      })
        .then((response: any) => {
          this.call_count = response.data.data;
        })
    },
    today_delivery_count() {
      let path = import.meta.env.VITE_BASE_URL + '/stats/delivery/count/today'
      axios({
        method: "get",
        url: path,
        withCredentials: true,
        headers: authHeader(),
      })
        .then((response: any) => {
          this.delivery_count = response.data.data;
        })
    },
    today_delivery_delivered() {
      let path = import.meta.env.VITE_BASE_URL + '/stats/delivery/count/delivered/today'
      axios({
        method: "get",
        url: path,
        withCredentials: true,
        headers: authHeader(),
      })
        .then((response: any) => {
          console.log(response.data)
          this.delivery_count_delivered = response.data.data;
        })
    },
    today_price_oil() {
      let path = import.meta.env.VITE_BASE_URL + '/info/price/oil'
      axios({
        method: "get",
        url: path,
        withCredentials: true,
        headers: authHeader(),
      })
        .then((response: any) => {
          this.price_from_supplier = response.data.price_from_supplier;
          this.today_oil_price = response.data.price_for_customer;
          this.price_for_employee = response.data.price_for_employee;
          this.price_same_day = response.data.price_same_day;
          this.price_prime = response.data.price_prime;
          this.price_emergency = response.data.price_emergency;
        })
    },

  },
})
</script>

<style scoped></style>
<script setup lang="ts">
</script>