<script setup>
import PageTitle from "@/components/global/PageTitle.vue";
import RestrictedPageWrapper from "@/components/page/wrappers/RestrictedPageWrapper.vue";
import { SessionUser } from "@/components/session/token/SessionUser.vue";
import DepartmentSubPageWrapper from "@/views/dashboards/superUserDashboard/department/DepartmentSubPageWrapper.vue";
import { setDepartment, department, departmentId, getDepartmentPrice, editDepartmentPrice } from "@/views/dashboards/superUserDashboard/department/SuperUserSelectedDepartmentObject.vue";
import { useRouter } from 'vue-router'
import { ref } from 'vue';
import { getProducts } from "@/components/shop/Products.vue";

// Get the department from the route
const router = useRouter()
setDepartment(router.currentRoute.value.params.departmentId);

// Set the products
const products = ref([]);

// Get the products
getProducts().then((response) => {
  products.value = response.data.data;
});
</script>

<template>
  <RestrictedPageWrapper :hasPermission="SessionUser.canAccessSuperUser()">
    <DepartmentSubPageWrapper>
      <template #title>
        <PageTitle title="Department" subtitle="Department pricing" />
      </template>
      <div>
        <table class="is-fullwidth table table-striped is-hoverable is-bordered">
          <thead>
            <tr>
              <th>Product</th>
              <th>Default price</th>
              <th>Department price</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="product in products" :key="product.id">
              <td>{{ product.name }}</td>
              <td>{{ product.price }}</td>
              <td
                  @click="editDepartmentPrice(product)"
                  class="is-clickable"
              >{{ getDepartmentPrice(product) === product.price ? '-' : getDepartmentPrice(product) }}
                <i class="is-pulled-right fas fa-edit"></i>
              </td>
            </tr>
          </tbody>
        </table>
        Department prices...
        <code>{{ departmentId }}</code>
        <code>{{ department.id }}</code>
        <code>{{ department.name }}</code>
        <code>{{ department.description }}</code>
        <code>{{ department.created_at }}</code>
        <code>{{ department.updated_at }}</code>
      </div>
    </DepartmentSubPageWrapper>
  </RestrictedPageWrapper>
</template>

<style scoped>

</style>