<template>
    <section v-if="!addBool" :class="['ordering-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
        <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']" id="ordering">Ordering information:
            <div class="asset-data">
                <table class="data-table" id="asset-table-no-customer">
                    <tbody>
                        <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
                            <th
                                :class="['Article', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Article-darkmode' : 'Article-lightmode']">
                                Article</th>
                            <th
                                :class="['Amount', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Amount-darkmode' : 'Amount-lightmode']">
                                Amount</th>
                            <th
                                :class="['Price', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Price-darkmode' : 'Price-lightmode']">
                                Price</th>
                            <th :class="['Comments', darkMode ? 'th-darkmode' : 'th-lightmode']">Comments</th>
                        </tr>
                        <tr v-for="info in orderingInfo" :key="info.primaryID"
                            :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
                            <td v-if="!editable"
                                :class="['Article', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Article-darkmode' : 'Article-lightmode']">
                                {{ info.article }}</td>
                            <td v-if="editable"
                                :class="['Article', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Article-darkmode' : 'Article-lightmode']">
                                <input type="text" v-model="info.article" @change="updateOrderingInfo(info)"
                                    :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
                            </td>
                            <td v-if="!editable"
                                :class="['Amount', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Amount-darkmode' : 'Amount-lightmode']">
                                {{ info.amount }}</td>
                            <td v-if="editable"
                                :class="['Amount', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Amount-darkmode' : 'Amount-lightmode']">
                                <input type="text" v-model="info.amount" @change="updateOrderingInfo(info)"
                                    :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
                            </td>
                            <td v-if="!editable"
                                :class="['Price', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Price-darkmode' : 'Price-lightmode']">
                                {{ info.price }}</td>
                            <td v-if="editable"
                                :class="['Price', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Price-darkmode' : 'Price-lightmode']">
                                <input type="text" v-model="info.price" @change="updateOrderingInfo(info)"
                                    :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
                            </td>
                            <td v-if="!editable" :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">{{
        info.comment }}</td>
                            <td v-if="editable" :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">
                                <input type="text" v-model="info.comment" @change="updateOrderingInfo(info)"
                                    :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']"> <button
                                    :class="[darkMode ? 'deleteOrderingInfo-darkmode' : 'deleteOrderingInfo-lightmode']"
                                    @click="deleteOrderingInfo(info.primaryID)">-</button>
                            </td>
                        </tr>
                        <tr v-if="editable && addRow" :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']"
                            id="row-1">
                            <td
                                :class="['Article', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Article-darkmode' : 'Article-lightmode']">
                                <input type="text" v-model="newArticle"
                                    :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
                            </td>
                            <td
                                :class="['Amount', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Amount-darkmode' : 'Amount-lightmode']">
                                <input type="text" v-model="newAmount"
                                    :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
                            </td>
                            <td
                                :class="['Price', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Price-darkmode' : 'Price-lightmode']">
                                <input type="text" v-model="newPrice"
                                    :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
                            </td>
                            <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']"><input type="text"
                                    v-model="newComment"
                                    :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']"> <button
                                    :class="[darkMode ? 'saveOrderingInfo-darkmode' : 'saveOrderingInfo-lightmode']"
                                    @click="addOrderingInfo()">Save</button> <button
                                    :class="[darkMode ? 'deleteLastOrderingInfo-darkmode' : 'deleteLastOrderingInfo-lightmode']"
                                    @click="deleteNewRow()">-</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </section>
    <section v-if="editable && !addBool" id="editOrderingInfo">
        <button :class="[darkMode ? 'editOrderingInfo-darkmode' : 'editOrderingInfo-lightmode']"
            @click="addChecklistRow()">+</button>
    </section>
    <section v-if="addBool" :class="['ordering-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
        <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']" id="ordering">Ordering information:
            <div class="asset-data">
                <table class="data-table" id="asset-table-no-client">
                    <tbody>
                        <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
                            <th
                                :class="['Article', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Article-darkmode' : 'Article-lightmode']">
                                Article</th>
                            <th
                                :class="['Amount', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Amount-darkmode' : 'Amount-lightmode']">
                                Amount</th>
                            <th
                                :class="['Price', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Price-darkmode' : 'Price-lightmode']">
                                Price</th>
                            <th :class="['Comments', darkMode ? 'th-darkmode' : 'th-lightmode']">Comments</th>
                        </tr>
                        <tr v-for="(newOI, index) in newOIs" :key="index"
                            :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
                            <td
                                :class="['Article', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Article-darkmode' : 'Article-lightmode']">
                                <input type="text" v-model="newOI.article" @change="updateOI()"
                                    :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
                            </td>
                            <td
                                :class="['Amount', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Amount-darkmode' : 'Amount-lightmode']">
                                <input type="text" v-model="newOI.amount" @change="updateOI()"
                                    :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
                            </td>
                            <td
                                :class="['Price', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Price-darkmode' : 'Price-lightmode']">
                                <input type="text" v-model="newOI.price" @change="updateOI()"
                                    :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
                            </td>
                            <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">
                                <input type="text" v-model="newOI.comment" @change="updateOI()"
                                    :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']"> <button
                                    :class="[darkMode ? 'deleteOrderingInfo-darkmode' : 'deleteOrderingInfo-lightmode']"
                                    @click="deleteOIFromNewTodos(index)">-</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </section>
    <section v-if="addBool" id="editOrderingInfo">
        <button :class="[darkMode ? 'editOrderingInfo-darkmode' : 'editOrderingInfo-lightmode']"
            @click="addRowForNewOI()">+</button>
    </section>
</template>


<script setup>
import { ref, onMounted, watch } from 'vue';
import Axios from '../axios.config.js';
import clientsideConfig from '../../clientsideConfig.js';
import { useStore } from 'vuex';
import { computed } from 'vue';

const store = useStore();
const addBool = computed(() => store.state.new);
const editable = computed(() => store.state.editable);
const chosenIssueSlipId = computed(() => store.state.chosenIssueSlipId);

const addRow = ref(false);
const orderingInfo = ref([])
const newArticle = ref('');
const newAmount = ref('');
const newPrice = ref('');
const newComment = ref('');

const newOIs = reactive([]);
const darkMode = ref(true)

// delete new todo row
const deleteNewRow = () => {
    newArticle.value = '';
    newAmount.value = '';
    newPrice.value = '';
    newComment.value = '';
    addRow.value = false;
}

const deleteOIFromNewTodos = (index) => {
    newOIs.splice(index, 1);
}

// add new ordering info
const addOrderingInfo = async () => {
    // check if all input data is valid
    if (newAmount.value.length === 0 && newArticle.value.length === 0 && newPrice.value.length === 0 && newComment.value.length === 0) {
        alert(`Please add some data in the ordering info row!`);
        return;
    }
    try {
        const response = await Axios.post(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/addOrderingInfo`,
            {
                issueSlipID: chosenIssueSlipId.value,
                article: newArticle.value,
                amount: newAmount.value,
                price: newPrice.value,
                comment: newComment.value,
            });
        addRow.value = false;
        await getOIById();
        newArticle.value = '';
        newAmount.value = '';
        newPrice.value = '';
        newComment.value = '';
    } catch (err) {
        console.log(err.response.statusText);
    }
}

// update ordering info fields in the store
const updateOI = () => {
    const infos = {
        ois: newOIs,
    };
    store.commit('updateOrderingInfoComponent', infos);
}

// add new row of ordering info
const addRowForNewOI = async () => {
    newOIs.push({
        issueSlipID: -1,
        article: '',
        amount: '',
        price: '',
        comment: ''
    });
}

//update data
const updateOrderingInfo = async (info) => {
    if (info.amount.length === 0 && info.article.length === 0 && info.price.length === 0 && info.comment.length === 0) {
        alert(`Please add some data in the ordering info row!`);
        return;
    }
    try {
        await Axios.put(
            `https://${clientsideConfig.url}:${clientsideConfig.port}/api/updateOrderingInfo`,
            {
                primaryID: info.primaryID,
                issueSlipID: info.issueSlipID,
                article: info.article,
                amount: info.amount,
                price: info.price,
                comment: info.comment,
            }
        );
        await getOIById();
    } catch (err) {
        console.log(err.response.statusText);
    }
}

// add new row for the ordering info
const addChecklistRow = async () => {
    if (addRow.value) {
        alert('Please confirm the last added row first.')
        return
    }
    addRow.value = true
}

// get ordering info from id
const getOIById = async () => {
    if (!addBool.value) {
        try {
            const response = await Axios.get(
                `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getOrderingInfo/${chosenIssueSlipId.value}`
            );
            orderingInfo.value = response.data;
        } catch (err) {
            console.log(err.response.statusText);
        }
    }
}

const deleteOrderingInfo = async (id) => {
    if (confirm("Do you really want to delete this ordering info? It cannot be undone!")) {
        try {
            await Axios.delete(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/deleteOrderingInfo/${id}`);
        } catch (err) {
            console.log(err.response.statusText);
        }
    } 
    await getOIById();
}

onMounted(() => {
    getOIById();
});
</script>

<script>
export default {
    name: "OrderingInformation",
};
</script>



<style scoped>
.ordering-information {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    padding: 1.25rem 1.875rem;
    border-radius: 0.625rem;
    box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
}

.section-darkmode {
    background-color: #2c2c2c;
}

.section-lightmode {
    background-color: #fff;
}

.data {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0 0.625rem;
    border-radius: 0.3125rem;
    box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
    letter-spacing: 5%;
    font: 400 0.75rem/250% Overpass, sans-serif;
}

.data-darkmode {
    background-color: #212121;
    color: #fff;
}

.data-lightmode {
    background-color: #EBEBEB;
    color: #000;
}

.input {
    border: none;
}

.label {
    letter-spacing: 5%;
    font: 400 1rem/1.875rem Overpass, sans-serif;
}

.label-darkmode {
    color: #FFFFFF;
}

.label-lightmode {
    color: #000;
}

.label#ordering {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.asset-data {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    align-self: stretch;
    padding-left: 0.625rem;
    padding-top: 1rem;
}

.data-table {
    width: 100%;
    padding: 0 0.625rem;
    table-layout: fixed;
    border-collapse: collapse;
}

.table-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 3.125rem;
    padding: 0.625rem;
    gap: 0.625rem;
}

.tr-head-darkmode {
    border-top: none;
    border-bottom: 0.0625rem solid #000000;
}

.tr-head-lightmode {
    border-top: none;
    border-bottom: 0.0625rem solid #8e8e8e;
}

.tr-darkmode {
    border-top: 0.0625rem solid #000000;
}

.tr-lightmode {
    border-top: 0.0625rem solid #8e8e8e;
}

th,
td {
    height: 1.875rem;
    text-align: left;
    padding: 0;
    letter-spacing: 5%;
    font: 400 0.875rem/1.875rem Overpass, sans-serif;
}

.th-darkmode,
.td-darkmode {
    color: #ffffff;
}

.th-lightmode,
.td-lightmode {
    color: #000;
}

th {
    font: 700 0.875rem/1.875rem Overpass, sans-serif;
}


.Article {
    width: 30%;
}

.Article-darkmode {
    border-right: 0.0625rem solid #000000;
}

.Article-lightmode {
    border-right: 0.0625rem solid #8e8e8e;
}

.Amount {
    width: 15%;
}

.Amount-darkmode {
    border-right: 0.0625rem solid #000000;
}

.Amount-lightmode {
    border-right: 0.0625rem solid #8e8e8e;
}

.Price {
    width: 15%;
}

.Price-darkmode {
    border-right: 0.0625rem solid #000000;
}

.Price-lightmode {
    border-right: 0.0625rem solid #8e8e8e;
}

.Comments {
    width: 50%;
    display: flex;
}

.deleteOrderingInfo-darkmode {
    background: #212121;
    color: #fff;
    font: 400 0.875rem/1.875rem Overpass, sans-serif;
    border: none;
    border-radius: 0.625rem;
    margin-left: 24.8rem;
    padding-left: 0.9rem;
    padding-right: 0.9rem;
}

.deleteLastOrderingInfo-darkmode {
    background: #212121;
    color: #fff;
    font: 400 0.875rem/1.875rem Overpass, sans-serif;
    border: none;
    border-radius: 0.625rem;
    margin-left: 2rem;
    padding-left: 0.9rem;
    padding-right: 0.9rem;
}

.editOrderingInfo-darkmode {
    background: #2c2c2c;
    color: #fff;
    font: 400 0.875rem/1.875rem Overpass, sans-serif;
    border: none;
    padding: 0.825rem 0.7rem;
    width: 4%;
    border-radius: 0.625rem;
    box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
}

.editOrderingInfo-lightmode {
    background: #EBEBEB;
    color: #212121;
    font: 400 0.875rem/1.875rem Overpass, sans-serif;
    border: none;
    margin-left: 15rem;
    padding-left: 0.9rem;
    padding-right: 0.9rem;
    border-radius: 0.625rem;
}

.saveOrderingInfo-darkmode {
    background: #212121;
    color: #fff;
    font: 400 0.875rem/1.875rem Overpass, sans-serif;
    border: none;
    border-radius: 0.625rem;
    margin-left: 19rem;
    padding-left: 0.9rem;
    padding-right: 0.9rem;
}

.saveOrderingInfo-lightmode {
    background: #EBEBEB;
    color: #212121;
    font: 400 0.875rem/1.875rem Overpass, sans-serif;
    border: none;
    border-radius: 0.625rem;
    margin-left: 19rem;
    padding-left: 0.9rem;
    padding-right: 0.9rem;
}

.deleteOrderingInfo-lightmode {
    background: #EBEBEB;
    color: #212121;
    font: 400 0.875rem/1.875rem Overpass, sans-serif;
    border: none;
    border-radius: 0.625rem;
    margin-left: 24.8rem;
    padding-left: 0.9rem;
    padding-right: 0.9rem;
}

.deleteLastOrderingInfo-lightmode {
    background: #EBEBEB;
    color: #212121;
    font: 400 0.875rem/1.875rem Overpass, sans-serif;
    border: none;
    border-radius: 0.625rem;
    margin-left: 2rem;
    padding-left: 0.9rem;
    padding-right: 0.9rem;
}

.deleteOrderingInfo-darkmode:hover,
.deleteLastOrderingInfo-darkmode:hover,

.saveOrderingInfo-darkmode:hover,
.editOrderingInfo-darkmode:hover {
    background-color: #444444;
    cursor: pointer;
}

.deleteOrderingInfo-lightmode:hover,
.deleteLastOrderingInfo-lightmode:hover,

.saveOrderingInfo-lightmode:hover,
.editOrderingInfo-lightmode:hover {
    background-color: #ACACAC;
    cursor: pointer;
}

#editOrderingInfo {
    text-align: right;
}
</style>