<template>

<div class="text-center">
<q-avatar size="100px" square>
<img :src="`/img/logo.png`" />
</q-avatar>
<div class="text-h5">Order History</div>
<div class="status q-mt-md text-subtitle1 text-negative" text-color="red">
{{ state.status }}
</div>
</div>
<div v-if="state.carts.length > 0">
<q-item style="bottom: -2vh">
<q-item-section class="col-2 q-ml-sm text-h6 text-primary" style="margin-
left: 35px">#</q-item-section>
<q-item-section class="q-ml-sm text-h6 text-primary" style="margin-left:
85px">Date Created</q-item-section>
</q-item>
<q-scroll-area style="height: 55vh">
<q-card class="q-ma-md">
<q-list separator>
<q-item clickable v-for="cart in state.carts" :key="cart.id"
@click="selectCart(cart.id)">
<q-item-section class="text-h7 text-bold" style="margin-left: 20px">
{{ cart.id }}
</q-item-section>
<q-item-section class="text-h7 text-bold">
{{ formatDate(cart.orderDate) }}
</q-item-section>
</q-item>
</q-list>
</q-card>
</q-scroll-area>
</div>
<q-dialog v-model="state.cartItemSelected" transition-show="rotate" transition-
hide="rotate">
<q-card>
<q-card-actions align="right">
<q-btn flat label="X" color="primary" v-close-popup class="text-h5" />
</q-card-actions>

<q-card-section style="margin-top: -10px" v-if="state.dateOrdered.length >

0">
<div class="text-h4 text-center text-primary">
Order {{ state.selectedCartId }}
</div>
<div class="text-subtitle1 text-center text-primary">
{{ formatDate(state.dateOrdered) }}
</div>
</q-card-section>
<div class="text-center">
<q-avatar size="100px" square>
<img :src="`/img/logo.png`" />
</q-avatar>
</div>
<q-card class="q-ma-md">
<!-- <q-scroll-area style="max-height: fit-content; max-width: fit-
content"> -->

<q-item style="bottom: -2vh">

 <q-item-section class="col-2 q-ml-sm text-h6 text-secondary">Name</q-
item-section>
<q-item-section class="col-2 q-ml-sm text-h6 text-secondary"
style="margin-left: 30px">Quantities</q-item-section>
<q-item-section class="q-sm text-h6 text-secondary text-
right">Extended</q-item-section>
</q-item>

<q-list separator>
<q-item style="bottom: 0vh">

<q-item-section class="col-2 q-ml-sm text-h7 text-secondary"

style="padding-left: 90px">S</q-item-section>
<q-item-section class="col-2 q-ml-sm text-h7 text-secondary"
style="padding-left: 20px">O</q-item-section>
<q-item-section class="col-2 q-ml-sm text-h7 text-secondary">B</q-item-
section>
</q-item>

<q-item v-for="cart in state.poster" :key="cart.id">

<q-item-section class="col-3 text-h7 text-secondary">
{{ cart.productName }}
</q-item-section>

<q-item-section class="col-6 q-ml-sm text-h7 text-secondary"

style="padding-left: 20px">
{{ `${cart.qtySold}` }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
{{
`${cart.qtyOrdered}`
}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
{{ `${cart.qtyBackordered}` }}
</q-item-section>
<q-item-section class="q-ml-sm text-h7 text-secondary text-right">
{{ formatCurrency(cart.total) }}
</q-item-section>
</q-item>

<q-item style="margin-left: 120px">

<q-item-section class="col-5 q-sm text-h6 text-secondary">Sub:</q-item-
section>
<q-item-section class="text-right">
{{ formatCurrency(state.subTotal) }}
</q-item-section>
</q-item>
<q-item style="margin-left: 70px">
<q-item-section class="col-5 q-sm text-h6 text-secondary">Tax(13%):</q-
item-section>
<q-item-section class="text-right">
{{ formatCurrency(state.tax) }}
</q-item-section>
</q-item>
<q-item style="margin-left: 105px">
<q-item-section class="col-5 q-sm text-h6 text-primary">Total:</q-item-
section>
<q-item-section class="text-h6 text-right text-primary">
{{ formatCurrency(state.total) }}
</q-item-section>
</q-item>
</q-list>
 </q-card>

<q-card-section class="text-center text-secondary">

{{ state.dialogStatus }}
</q-card-section>
</q-card>
</q-dialog>
</template>

<script>
import { reactive, onMounted } from "vue";
import { fetcher } from "../utils/apiutils";
import { formatCurrency } from "../utils/formatutil";
import { formatDate } from "../utils/formatDate";
export default {
setup() {
onMounted(() => {
getTrayItems();
});
let state = reactive({
status: "",
carts: [],
userInfo: [],
email: "",
dateOrdered: "",
cartItemSelected: false,
selectedCartId: "",
poster: [],
total: 0.0, // Total cost of items in the cart
tax: 0.0, // Tax amount
subTotal: 0.0, // Total cost including tax
dialogStatus: "",
});
const getTrayItems = async () => {
try {
if (sessionStorage.getItem("customer")) {
state.userInfo = JSON.parse(sessionStorage.getItem("customer"));
state.email = state.userInfo.email;
state.carts = await fetcher(`Order/${state.email}`);
state.status = `loaded ${state.carts.length} Orders`;
}
} catch (err) {
console.log(err);
state.status = `Error has occured: ${err.message}`;
}
};
const selectCart = async (cartid) => {
try {
state.cartItemSelected = true;
state.selectedCartId = cartid;
state.dialogStatus = "";
state.poster = await fetcher(`Order/${cartid}/${state.email}`);
state.subTotal = 0;
state.tax = 0;
if (state.poster.length > 0) {
// Reset subTotal and tax for each order
state.subTotal = 0;
state.tax = 0;
 state.poster.forEach((cartItem) => {
cartItem.total = cartItem.sellingPrice * cartItem.qtySold;
state.subTotal += cartItem.total;
});
for (var i = 0; i < state.carts.length; i++) {
if (state.carts[i].id == cartid) {
state.dateOrdered = state.carts[i].orderDate;
}
}
state.tax = 0.13 * state.subTotal;
state.total = state.subTotal + state.tax;
state.dialogStatus = `Details loaded for order ${cartid}`;
} else {
state.dateOrdered = ""; // Reset dateOrdered if there's no valid data
}
} catch (err) {
console.log(err);
state.status = `Error has occured: ${err.message}`;
}
};

return { state, formatDate, selectCart, formatCurrency };

},
};
</script>