<!-- src/pages/money/profit_year.vue -->
<template>
  <div class="flex">

    <div class="w-full px-4 md:px-10 py-4">
      <!-- Breadcrumbs -->
      <div class="text-sm breadcrumbs mb-6">
        <ul>
          <li>
            <router-link :to="{ name: 'home' }">
              Home
            </router-link>
          </li>
          <li>Money</li>
          <li>Profit Year</li>
        </ul>
      </div>

      <!-- Page Header -->
      <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4 mb-6">
        <div>
          <h1 class="text-2xl md:text-3xl font-bold flex items-center gap-3">
            <div
              class="w-10 h-10 rounded-xl bg-gradient-to-br from-primary to-primary/60 flex items-center justify-center shadow-lg">
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
                stroke="currentColor" class="w-5 h-5 text-primary-content">
                <path stroke-linecap="round" stroke-linejoin="round"
                  d="M12 6v12m-3-2.818l.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
              </svg>
            </div>
            Financial Overview
          </h1>
          <p class="text-base-content/60 mt-1 ml-13">Year to date profit analysis</p>
        </div>
      </div>

      <!-- Main Content -->
      <div class="modern-table-card p-8">
        <div class="stats shadow w-full bg-base-200">
          <div class="stat place-items-center">
            <div class="stat-title">Total Profit (Year To Date)</div>
            <div class="stat-value text-primary text-4xl py-4">{{ new Intl.NumberFormat('en-US', {
              style: 'currency',
              currency: 'USD'
            }).format(Number(profit_year || 0)) }}</div>
            <div class="stat-desc">Calculated from completed deliveries and services</div>
          </div>
        </div>
      </div>
    </div>
  </div>

</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'

export default defineComponent({
  name: 'MoneyYear',

  components: {
    Header,
    SideBar,
  },

  data() {
    return {
      token: null,
      user: null,
      employees: [],
      profit_year: 0,

    }
  },

  created() {
    this.userStatus()
  },
  mounted() {
    this.get_profit_year()

  },
  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;
          }
        })
        .catch(() => {
          this.user = null
        })
    },
    get_profit_year() {
      let path = import.meta.env.VITE_BASE_URL + '/money/profit/year';
      axios({
        method: 'get',
        url: path,
        headers: authHeader(),
      }).then((response: any) => {
        this.profit_year = response.data.total
      })
    },
  },
})
</script>

<style scoped></style>