<template>
  <div>
    <v-tabs class="mt-6 myorders-orderview-tabs">
      <v-tab id="hideInPrint">Items Ordered</v-tab>
      <v-tab-item>
        <v-card tile flat>
          <v-card-text>
            <v-simple-table id="hideInPrint">
              <template v-slot:default>
                <thead>
                  <tr>
                    <th class="text-left fontsize-16 font-weight-bold">Product Name</th>
                    <th class="text-left fontsize-16 font-weight-bold">Sku</th>
                    <th class="text-left fontsize-16 font-weight-bold">Price</th>
                    <th class="text-left fontsize-16 font-weight-bold">Qty</th>
                    <th class="text-left fontsize-16 font-weight-bold">Subtotal</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(product,index) in viewOrderItem.items" v-bind:key="index" v-show="product.basePrice != 0">
                    <td>{{ product.name }}</td>
                    <td>{{ product.sku }}</td>
                    <td class="font-weight-bold">${{ priceFormatter(product.basePrice) }}</td>
                    <td>
                      <v-col class="pl-0">
                        <p class="mb-0">Ordered:{{ product.qtyOrdered }}</p>
                      </v-col>
                    </td>
                    <td class="font-weight-bold">${{ priceFormatter(product.baseRowTotalInclTax) }}</td>
                  </tr>
                </tbody>
              </template>
            </v-simple-table>
            <div class="order-table-border" id="showInPrint">
              <table>
                <h1 class="order-information-tab-heading">Items Ordered</h1>
                <v-divider></v-divider>
                <tr>
                  <th class="order-table-heading">Product Name</th>
                  <th class="order-table-heading">Sku</th>
                  <th class="order-table-heading">Price</th>
                  <th class="order-table-heading">Qty</th>
                  <th class="order-table-heading">Subtotal</th>
                </tr>
                <tr v-for="(product,index) in viewOrderItem.items" v-bind:key="index" v-show="product.basePrice != 0">
                  <td class="order-table-content">{{ product.name }}</td>
                  <td class="order-table-content">{{ product.sku }}</td>
                  <td class="order-table-content">
                    <b>${{ priceFormatter(product.basePrice) }}</b>
                  </td>
                  <td class="order-table-content">Ordered:{{ product.qtyOrdered }}</td>
                  <td class="order-table-content">
                    <b>${{ priceFormatter(product.baseRowTotalInclTax) }}</b>
                  </td>
                </tr>
              </table>
              <v-divider></v-divider>
              <v-alert class="grey lighten-4 mt-12" dense id="showInPrint">
                <v-row>
                  <v-col class="order-table-cloumnFirst">
                    <p>Subtotal</p>
                  </v-col>
                  <v-col class="order-table-cloumnSecond">
                    <p>${{priceFormatter(viewOrderItem.baseSubtotalInclTax)}}</p>
                  </v-col>
                </v-row>
                <v-row>
                  <v-col class="order-table-cloumnFirst">
                    <p>Shipping & Handling</p>
                  </v-col>
                  <v-col class="order-table-cloumnSecond">
                    <p>${{priceFormatter(viewOrderItem.baseShippingInclTax)}}</p>
                  </v-col>
                </v-row>
                <v-row v-show="viewOrderItem.discountAmount">
                  <v-col class="order-table-cloumnFirst">
                    <p>Discount</p>
                  </v-col>
                  <v-col class="order-table-cloumnSecond">
                    <p>${{priceFormatter(viewOrderItem.discountAmount)}}</p>
                  </v-col>
                </v-row>
                <v-row v-show="viewOrderItem.baseTaxAmount">
                  <v-col class="order-table-cloumnFirst">
                    <p>Tax</p>
                  </v-col>
                  <v-col class="order-table-cloumnSecond">
                    <p>${{priceFormatter(viewOrderItem.baseTaxAmount)}}</p>
                  </v-col>
                </v-row>
                <v-row>
                  <v-col class="order-table-cloumnFirst">
                    <p>
                      <b>Grand Total</b>
                    </p>
                  </v-col>
                  <v-col class="order-table-cloumnSecond">
                    <p>
                      <b>${{priceFormatter(viewOrderItem.grandTotal)}}</b>
                    </p>
                  </v-col>
                </v-row>
              </v-alert>
              <v-divider></v-divider>
            </div>
            <v-alert class="grey lighten-4 mt-12" dense id="hideInPrint">
              <v-row>
                <v-col cols="10" class="pb-0">
                  <p class="float-right">Subtotal</p>
                </v-col>
                <v-col cols="2" class="pb-0">
                  <p class="float-right">${{priceFormatter(viewOrderItem.baseSubtotalInclTax)}}</p>
                </v-col>
              </v-row>
              <v-row>
                <v-col cols="10" class="pb-0">
                  <p class="float-right">Shipping & Handling</p>
                </v-col>
                <v-col cols="2" class="pb-0">
                  <p class="float-right">${{priceFormatter(viewOrderItem.baseShippingInclTax)}}</p>
                </v-col>
              </v-row>
              <v-row v-show="viewOrderItem.baseTaxAmount">
                <v-col cols="10" class="pb-0">
                  <p class="float-right">Tax</p>
                </v-col>
                <v-col cols="2" class="pb-0">
                  <p class="float-right">${{priceFormatter(viewOrderItem.baseTaxAmount)}}</p>
                </v-col>
              </v-row>
              <v-row>
                <v-col cols="10" class="pb-0">
                  <p class="float-right font-weight-bold">Grand Total</p>
                </v-col>
                <v-col cols="2" class="pb-0">
                  <p class="float-right">${{priceFormatter(viewOrderItem.grandTotal)}}</p>
                </v-col>
              </v-row>
            </v-alert>
          </v-card-text>
        </v-card>
      </v-tab-item>
      <!--<v-tab>Invoices</v-tab>
          <v-tab-item>
            <v-card tile flat>
              <v-card-text>
                <v-btn
                  class="primary--text pl-0 viewordertabs-action-button"
                  depressed
                  dark
                  @click="reorder(item)"
                  text
                >Print All Invoices</v-btn>
                <v-row>
                  <v-col cols="auto">
                    <h1 class="d-none d-sm-flex">Invoice #{{viewOrderItem.order }}</h1>
                    <h2 class="fontsize-18 mb-0 d-flex d-sm-none">Invoice #{{viewOrderItem.order }}</h2>
                  </v-col>
                  <v-col cols="auto">
                    <v-btn
                      class="primary--text viewordertabs-action-button pb-5 pb-sm-0 pb-md-0"
                      depressed
                      dark
                      @click="reorder(item)"
                      text
                    >Print Invoice</v-btn>
                  </v-col>
                </v-row>
                <v-divider></v-divider>
                <v-simple-table>
                  <template v-slot:default>
                    <thead>
                      <tr>
                        <th class="text-left fontsize-16 font-weight-bold">Product Name</th>
                        <th class="text-left fontsize-16 font-weight-bold">Sku</th>
                        <th class="text-left fontsize-16 font-weight-bold">Price</th>
                        <th class="text-left fontsize-16 font-weight-bold">Qty Invoiced</th>
                        <th class="text-left fontsize-16 font-weight-bold">Subtotal</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr  v-for="(item,index) in productInvoice.items" v-bind:key="index">
                        <td>{{ item.name }}</td>
                        <td>{{ item.sku }}</td>
                        <td class="font-weight-bold">${{ item.price }}</td>
                        <td>{{ item.qty }}</td>
                        <td class="font-weight-bold">${{ item.rowTotal }}</td>
                      </tr>
                    </tbody>
                  </template>
                </v-simple-table>
                <v-alert class="grey lighten-4 mt-12" dense>
                  <v-row>
                    <v-col cols="10" class="pb-0">
                      <p class="float-right">Subtotal</p>
                    </v-col>
                    <v-col cols="2" class="pb-0">
                      <p class="float-right">${{productInvoice.subtotal}}</p>
                    </v-col>
                  </v-row>
                  <v-row>
                    <v-col cols="10" class="pb-0">
                      <p class="float-right">Shipping & Handling</p>
                    </v-col>
                    <v-col cols="2" class="pb-0">
                      <p class="float-right">${{productInvoice.shippingTaxAmount}}</p>
                    </v-col>
                  </v-row>
                  <v-row>
                    <v-col cols="10" class="pb-0">
                      <p class="float-right">Tax</p>
                    </v-col>
                    <v-col cols="2" class="pb-0">
                      <p class="float-right">${{productInvoice.taxAmount}}</p>
                    </v-col>
                  </v-row>
                  <v-row>
                    <v-col cols="10" class="pb-0">
                      <p class="float-right font-weight-bold">Grand Total</p>
                    </v-col>
                    <v-col cols="2" class="pb-0">
                      <p class="float-right">${{productInvoice.grandTotal}}</p>
                    </v-col>
                  </v-row>
                </v-alert>
              </v-card-text>
            </v-card>
      </v-tab-item>-->
      <!--<v-tab>Order Shipments</v-tab>
          <v-tab-item>
            <v-card tile flat>
              <v-card-text>
                <v-btn
                  class="primary--text pl-0 viewordertabs-action-button"
                  depressed
                  dark
                  @click="reorder(item)"
                  text
                >Print All Shipments</v-btn>
                <v-row>
                  <v-col cols="auto">
                    <h1 class="d-none d-sm-flex">Shipment #{{viewOrderItem.order }}</h1>
                    <h2 class="fontsize-18 mb-0 d-flex d-sm-none">Shipment #{{viewOrderItem.order }}</h2>
                  </v-col>
                  <v-col>
                    <v-btn
                      class="primary--text viewordertabs-action-button pl-0"
                      depressed
                      dark
                      @click="reorder(item)"
                      text
                    >Print Shipment</v-btn>
                    <v-btn
                      class="primary--text pr-0 float-right viewordertabs-action-button"
                      depressed
                      dark
                      @click="reorder(item)"
                      text
                    >Track this Shipment</v-btn>
                  </v-col>
                </v-row>
                <v-divider></v-divider>
                <v-simple-table>
                  <template v-slot:default>
                    <thead>
                      <tr>
                        <th class="text-left fontsize-16 font-weight-bold">Product Name</th>
                        <th class="text-left fontsize-16 font-weight-bold">Sku</th>
                        <th class="text-left fontsize-16 font-weight-bold">Qty Shipped</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>{{ viewOrderItem.name }}</td>
                        <td>{{ viewOrderItem.sku }}</td>
                        <td>1</td>
                      </tr>
                    </tbody>
                  </template>
                </v-simple-table>
                <v-divider class="mt-12"></v-divider>
              </v-card-text>
            </v-card>
      </v-tab-item>-->
      <!--<v-tab>Refunds</v-tab>
          <v-tab-item>
            <v-card tile flat>
              <v-card-text>
                <v-btn
                  class="primary--text pl-0 viewordertabs-action-button"
                  depressed
                  dark
                  @click="reorder(item)"
                  text
                >Print All Refunds</v-btn>
                <v-row>
                  <v-col cols="auto">
                    <h1 class="d-none d-sm-flex">Invoice #{{viewOrderItem.order }}</h1>
                    <h2 class="fontsize-18 mb-0 d-flex d-sm-none">Invoice #{{viewOrderItem.order }}</h2>
                  </v-col>
                  <v-col cols="auto">
                    <v-btn
                      class="primary--text viewordertabs-action-button pb-5 pb-sm-0 pb-md-0"
                      depressed
                      dark
                      @click="reorder(item)"
                      text
                    >Print Refund</v-btn>
                  </v-col>
                </v-row>
                <v-divider></v-divider>
                <v-simple-table>
                  <template v-slot:default>
                    <thead>
                      <tr>
                        <th class="text-left fontsize-16 font-weight-bold">Product Name</th>
                        <th class="text-left fontsize-16 font-weight-bold">Sku</th>
                        <th class="text-left fontsize-16 font-weight-bold">Price</th>
                        <th class="text-left fontsize-16 font-weight-bold">Qty</th>
                        <th class="text-left fontsize-16 font-weight-bold">Subtotal</th>
                        <th class="text-left fontsize-16 font-weight-bold">Discount Amount</th>
                        <th class="text-left fontsize-16 font-weight-bold">Raw Total</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>{{ viewOrderItem.name }}</td>
                        <td>{{ viewOrderItem.sku }}</td>
                        <td class="font-weight-bold">${{ viewOrderItem.total }}</td>
                        <td>1</td>
                        <td class="font-weight-bold">${{ viewOrderItem.total }}</td>
                        <td class="font-weight-bold">$0.00</td>
                        <td class="font-weight-bold">${{ viewOrderItem.total }}</td>
                      </tr>
                    </tbody>
                  </template>
                </v-simple-table>
                <v-alert class="grey lighten-4 mt-12" dense>
                  <v-row>
                    <v-col cols="10" class="pb-0">
                      <p class="float-right">Subtotal</p>
                    </v-col>
                    <v-col cols="2" class="pb-0">
                      <p class="float-right">${{viewOrderItem.total}}</p>
                    </v-col>
                  </v-row>
                  <v-row>
                    <v-col cols="10" class="pb-0">
                      <p class="float-right">Shipping & Handling</p>
                    </v-col>
                    <v-col cols="2" class="pb-0">
                      <p class="float-right">${{viewOrderItem.total}}</p>
                    </v-col>
                  </v-row>
                  <v-row>
                    <v-col cols="10" class="pb-0">
                      <p class="float-right">Tax</p>
                    </v-col>
                    <v-col cols="2" class="pb-0">
                      <p class="float-right">${{viewOrderItem.total}}</p>
                    </v-col>
                  </v-row>
                  <v-row>
                    <v-col cols="10" class="pb-0">
                      <p class="float-right font-weight-bold">Grand Total</p>
                    </v-col>
                    <v-col cols="2" class="pb-0">
                      <p class="float-right">${{viewOrderItem.total}}</p>
                    </v-col>
                  </v-row>
                </v-alert>
              </v-card-text>
            </v-card>
      </v-tab-item>-->
    </v-tabs>
    <v-col >
      <h1 class="order-information-heading">Order Information</h1>
      <v-divider></v-divider>
      <v-row>
        <v-col cols="12" md="6" v-if="viewOrderItem.extensionAttributes&&viewOrderItem.extensionAttributes.shippingAssignments">
          <div
            v-for="(details,index) in viewOrderItem.extensionAttributes.shippingAssignments"
            v-bind:key="index"
          >
            <p class="order-information-subheading"><b>Shipping Address</b></p>

            <p class="order-information-details" v-if="details.shipping&&details.shipping.address">
              {{details.shipping.address.firstname}}
              <span class="px-1"></span>
              {{details.shipping.address.lastname}}
            </p>
            <p class="order-information-details" v-if="details.shipping&&details.shipping.address">{{details.shipping.address.street[0]}}</p>
            <p class="order-information-details" v-if="details.shipping&&details.shipping.address">
              {{details.shipping.address.city}},
              <span class="px-1"></span>
              {{details.shipping.address.region}}
              <span class="px-1"></span>
              {{details.shipping.address.postcode}}
            </p>
            <p class="order-information-details" v-if="details.shipping&&details.shipping.address">{{countryName(details.shipping.address.countryId)}}</p>
            <p
              class="order-information-details text-decoration-underline" v-if="details.shipping&&details.shipping.address"
            >T:{{details.shipping.address.telephone}}</p>
          </div>
        </v-col>
        <v-col cols="12" md="6">
          <p class="order-information-subheading"><b>Shipping Method</b></p>
          <p class="order-information-details">{{viewOrderItem.shippingDescription}}</p>
        </v-col>

        <v-col cols="12" md="6" v-if="viewOrderItem.billingAddress">
          <p class="order-information-subheading"><b>Billing Address</b></p>
          <p class="order-information-details">
            {{viewOrderItem.billingAddress.firstname}}
            <span class="px-1"></span>
            {{viewOrderItem.billingAddress.lastname}}
          </p>
          <p class="order-information-details">{{viewOrderItem.billingAddress.street[0]}}</p>
          <p class="order-information-details">
            {{viewOrderItem.billingAddress.city}},
            <span class="px-1"></span>
            {{viewOrderItem.billingAddress.region}}
            <span class="px-1"></span>
            {{viewOrderItem.billingAddress.postcode}}
          </p>
          <p
            class="order-information-details"
          >{{countryName(viewOrderItem.billingAddress.countryId)}}</p>
          <p
            class="order-information-details text-decoration-underline"
          >T:{{viewOrderItem.billingAddress.telephone}}</p>
        </v-col>
        <v-col cols="12" md="6" v-if="viewOrderItem.payment">
          <p class="order-information-subheading"><b>Payment Method</b></p>
          <p class="order-information-details">{{viewOrderItem.payment.additionalInformation[0]}}</p>
          <v-divider></v-divider>
          <v-row>
            <v-col>
              
              <p class="order-information-details-creditcard">
                <b>Credit Card Type</b>
              </p>
            </v-col>
            <v-col>
              <p
                class="order-information-details-creditcard"
              >{{viewOrderItem.payment.additionalInformation[8]}}</p>
            </v-col>
          </v-row>
          <v-divider></v-divider>
          <v-row>
            <v-col>
              <p class="order-information-details-creditcard">
                <b>Credit Card Number</b>
              </p>
            </v-col>
            <v-col>
              <p
                class="order-information-details-creditcard"
              >{{viewOrderItem.payment.additionalInformation[7]}}</p>
            </v-col>
          </v-row>
        </v-col>
      </v-row>
    </v-col>
  </div>
</template>
<script>
import {  
  priceFormatter
} from "@/services/util.service";
export default {
  name: "ViewOrderTabs",
  props: ["viewOrderItem", "productInvoice"],
  data: () => ({
    viewOrder: false,
    priceFormatter: priceFormatter,
  }),
  components: {},
  computed: {
    hideAndShowFields: function() {
      let currentName = this.$router.history.current.name;
      if (currentName === "MyOrders") {
        return true;
      } else {
        return false;
      }
    },
    cartProductsItem() {
      return this.$store.state.meProductList.cartProductData;
    },
    userAuth: function() {
      return this.$store.state.auth.userAuth;
    },
    countryAndStatesList() {
      return this.$store.state.accountOne.allCountries;
    }
  },
  methods: {
    countryName(countryId) {
      if (countryId) {
        let name = this.countryAndStatesList.filter(
          country => country.id == countryId
        );
        if(name.length > 0){
        return name[0].fullNameEnglish;
        }
      }
    },
    viewMyOrder(item) {
      return (this.viewOrder = true) && (this.viewOrderItem = item);
    }
  },
  created() {
    this.$store.dispatch("accountOne/fetchCountries");
  }
};
</script>
<style src="./ViewOrderTabs.scss" lang="scss" scoped />
