Vue.component('warehouse-e-shop', {
    //language=Vue
    template: `
      <tt-card>
        <tt-expandable-shopping-cart :cart-items="shoppingCart" @submitOrder="openOrderDialog"/>

        <tt-modal :show.sync="createOrderDialog"
                  :delete="false"
                  title="Bestellung abschicken"
                  @submit="submitOrder">

          <tt-select v-model="createOrderDialogData.deliveryMode" label="Adresse" :options="[
                        {text: 'Einzelne Adresse', value: 'singleAddress'},
                        // {text: 'Mehrere Adressen', value: 'multipleAddresses'},
                    ]" sm row/>
          <tt-input v-model="createOrderDialogData.extRef" label="Externe Referenz" sm row/>

          <tt-input v-model="createOrderDialogData.deliveryAddressName" label="Name" sm row/>
          <tt-input v-model="createOrderDialogData.deliveryAddressMail" label="E-Mail" sm row/>
          <tt-input v-model="createOrderDialogData.deliveryAddressPhone" label="Nummer" sm row/>
          <tt-input v-model="createOrderDialogData.deliveryAddressAdditional" label="Anschriftenzusatz" sm row/>
          <tt-input v-model="createOrderDialogData.deliveryAddressLine" label="Straße" sm row/>
          <tt-input v-model="createOrderDialogData.deliveryAddressPLZ" label="PLZ" sm row/>
          <tt-input v-model="createOrderDialogData.deliveryAddressCity" label="Stadt" sm row/>

        </tt-modal>

        <tt-table-crud>

          <template v-slot:price="{ row }">
            <span v-if="row.hasOwnProperty('calculatedSellPrice')"> {{ row.calculatedSellPrice.toFixed(2) }} €</span>
            <span v-else>
                        {{ getArticlePrice(row).toFixed(2) }} €
                      </span>
          </template>

          <template v-slot:amount="{ row }">
            <!-- this has no padding - add a full width full height tt-input with  -->
            <tt-input type="number" style="width: 100%; height: 100%;margin:0 !important" v-model="itemAmounts[row.hasOwnProperty('calculatedSellPrice') ? 'P-' + row.id : 'I-' + row.id]" sm/>
          </template>

          <template v-slot:add="{ row }">
            <a style="cursor: pointer;" @click="addToCart(row, row.hasOwnProperty('calculatedSellPrice') ? 'P' : 'I')">
              <i class="fas fa-shopping-cart text-primary"></i>
            </a>
          </template>

        </tt-table-crud>
      </tt-card>
    `, data() {
        return {
            window: window, itemAmounts: {}, shoppingCart: [], createOrderDialog: false, createOrderDialogData: {
                deliveryMode: 'singleAddress',
                extRef: '',
                deliveryAddressName: '',
                deliveryAddressMail: '',
                deliveryAddressPhone: '',
                deliveryAddressLine: '',
                deliveryAddressPLZ: '',
                deliveryAddressCity: '',
            },
            userAddressId: window['TT_CONFIG']['userAddressId'] || null, // Get user's address ID from PHP
        }
    },
    methods: {
        getArticlePrice(row) {
            const cheapestSellPrice = JSON.parse(row.cheapestSellPrice);
            let priceTitle = '';

            if (this.userAddressId === 209) {
                priceTitle = 'Energie Steiermark';
            } else if (this.userAddressId === 9633) {
                priceTitle = 'SBIDI';
            } else {
                // Default or error handling if addressId is not recognized
                return 0;
            }

            const foundPrice = Array.isArray(cheapestSellPrice)
                ? cheapestSellPrice.find(price => price.title === priceTitle)
                : Object.values(cheapestSellPrice).find(price => price.title === priceTitle);

            return foundPrice ? foundPrice.price : 0;
        },
        async openOrderDialog() {
            this.createOrderDialog = true;
        },
        async submitOrder() {
            const response = await axios.post(`${window['TT_CONFIG']['BASE_PATH']}/WarehouseEShopOrder/createOrder`, {
                shoppingCart: this.shoppingCart,
                deliveryMode: this.createOrderDialogData.deliveryMode,
                extRef: this.createOrderDialogData.extRef?.trim(),
                deliveryAddressName: this.createOrderDialogData.deliveryAddressName?.trim(),
                deliveryAddressMail: this.createOrderDialogData.deliveryAddressMail?.trim(),
                deliveryAddressPhone: this.createOrderDialogData.deliveryAddressPhone?.trim(),
                deliveryAddressAdditional: this.createOrderDialogData.deliveryAddressAdditional?.trim(),
                deliveryAddressLine: this.createOrderDialogData.deliveryAddressLine?.trim(),
                deliveryAddressPLZ: this.createOrderDialogData.deliveryAddressPLZ?.trim(),
                deliveryAddressCity: this.createOrderDialogData.deliveryAddressCity?.trim(),
            });
            if (response.data.success) {
                this.window.notify('success', response.data.message || 'Erfolgreich gespeichert');
                this.shoppingCart = [];
                this.itemAmounts = {}; // Clear item amounts after successful order
                this.createOrderDialogData = {
                    deliveryMode: 'singleAddress',
                    extRef: '',
                    deliveryAddressName: '',
                    deliveryAddressMail: '',
                    deliveryAddressPhone: '',
                    deliveryAddressAdditional: '',
                    deliveryAddressLine: '',
                    deliveryAddressPLZ: '',
                    deliveryAddressCity: '',
                }
                this.createOrderDialog = false;
            } else {
                this.window.notify('error',
                    response.data.errors ? Object.values(response.data.errors).join('<br>') : response.data.message ||
                        'Ein Fehler ist aufgetreten');
            }
        },
        addToCart(row, type) {
            row = JSON.parse(JSON.stringify(row));
            row.id = `${type}-${row.id}`;
            if (!this.itemAmounts[row.id] || this.itemAmounts[row.id] === 0) {
                window.notify('error', 'Bitte geben Sie eine Menge ein.');
                return;
            }

            console.log(this.shoppingCart, row)

            // Check if Article is already in the shopping cart
            if (this.shoppingCart.some(item => item.itemId === row.id)) {
                window.notify('warning', `${row.title} ist bereits im Warenkorb.`);
                return;
            }

            this.shoppingCart.push({itemId: row.id, title: row.title, amount: this.itemAmounts[row.id]});
            window.notify('success', `${this.itemAmounts[row.id]}x ${row.title} wurde dem Warenkorb hinzugefügt.`);

        }
    },
})