<template>
  <div
    class="BookingInfo tw-flex tw-flex-col xl:tw-flex-row xl:tw-justify-between tw-bg-neutrals-0 tw-rounded-[20px] tw-text-base-primary tw-p-5"
    v-if="BookingOrder.Currency && BookingOrder.OnSiteService.Provider"
  >
    <div class="tw-mb-[30px] xl:tw-mb-0">
      <div
        class="tw-body-4 tw-text-error-default tw-font-bold tw-mb-[12px] tw-mt-[4px] md:tw-body-2 md:tw-mt-[8px]"
      >
        <span :class="bookingColor(mybookingStatusMap(BookingOrder.BookingStatus))"
            >{{ $t(mybookingStatusMap(BookingOrder.BookingStatus)) }} ,&nbsp;</span
          >
        <span v-if="BookingOrder.PaymentStatus != null" :class="bookingColor(mypaymentStatusMap(BookingOrder.PaymentStatus))">{{
            $t(mypaymentStatusMap(BookingOrder.PaymentStatus))
          }}</span>
      </div>
      <div class="tw-flex tw-items-center tw-mb-[11px] md:tw-mb-[18px]">
        <div class="tw-body-4 tw-text-neutrals-800 tw-mr-[11px] md:tw-body-3">
          {{ BookingOrder.BookingNo }}
        </div>
        <button
          class="tw-body-5 tw-py-[4px] tw-px-[10px] tw-rounded-[12px] tw-bg-complementary-3 tw-text-complementary-1 md:tw-body-4 hover:tw-text-[#A0B5FF] no-print"
          @click="copy(BookingOrder.BookingNo)"
        >
          {{ $t("Copy") }}
        </button>
      </div>
      <div
        class="tw-body-4 tw-text-neutrals-800 tw-mb-[14px] md:tw-body-3 md:tw-mb-[18px]"
      >
        {{ $t("Booking Date：") }}&nbsp;{{ new Date(BookingOrder.BookingDate).toLocaleString() }}
      </div>
      <div
        class="tw-flex tw-flex-col md:tw-flex-row-reverse md:tw-justify-end"
      >
        <div v-if="BookingOrder.PaymentType != '3'"
          class="tw-grid tw-grid-cols-[20px_auto] tw-gap-[4px] tw-items-center tw-mb-[14px]"
        >
          <img src="~/assets/svg/Alert.svg" />
          <div class="tw-body-4 tw-text-warning-default">Remittance only</div>
        </div>
        <div class="tw-body-4 tw-flex md:tw-body-3">
          <div class="tw-mr-[4px]">{{ $t("Total Amount") }}:&nbsp;</div>
          <div
            class="tw-text-primary-1 tw-font-bold tw-mr-[12px] md:tw-mr-[28px]"
          >
            ${{ BookingOrder.TotalPrice }}&nbsp;
            {{ BookingOrder.Currency.CurrencyName }}
          </div>
          <button
            class="tw-text-complementary-1 tw-flex md:tw-mr-[33px] hover:tw-text-[#A0B5FF] no-print"
            @click="$emit('view-details')"
          >
            {{ $t("View Details") }}
          </button>
        </div>
      </div>
    </div>
    <div class="tw-flex tw-flex-col lg:tw-pr-[0px] no-print">
      <div
        class="tw-grid tw-cols-2 tw-gap-[10px] tw-body-3 tw-mb-[22px] lg:tw-cols-1 no-print"
      >
        
        <!-- <button
          class="tw-col-span-2 tw-bg-primary-1 tw-py-[10px] tw-px-[121px] tw-rounded-[16px] tw-text-neutrals-0 hover:tw-bg-primary-2"
        >
          Go to Pay
        </button> -->
        <button v-if="BookingOrder.OnSiteService.Provider.ProviderStatus"
          class="tw-py-[10px] tw-px-[19px] tw-rounded-[12px] tw-text-neutrals-400 tw-border-solid tw-border-neutrals-400 tw-border-[1px] xl:tw-col-span-2 hover:tw-bg-neutrals-100 no-print"
          @click="$emit('cancel-booking')"
        >
          {{ $t("Cancel Booking") }}
        </button>
        <button
          class="tw-py-[10px] tw-px-[35px] tw-rounded-[12px] tw-text-primary-1 tw-border-solid tw-border-primary-1 tw-border-[1px] xl:tw-col-span-2 hover:tw-bg-primary-3 no-print"
          @click="$emit('contact-us')"
        >
          {{ $t("Contact Us") }}
        </button>
      </div>
      <div
        class="tw-grid tw-grid-cols-[16px_auto] tw-gap-[10px] tw-items-center tw-mb-[21px] lg:tw-mb-[9px] xl:tw-place-self-end no-print"
      >
        <img src="~/assets/svg/fi_help-circle.svg"/>
        <button
          class="tw-text-complementary-1 tw-flex md:tw-mr-[33px] hover:tw-text-[#A0B5FF] no-print"
          @click="$emit('cancellation-policy')"
        >
          {{ $t("Cancellation Policy") }}
        </button>
      </div>
    </div>
  </div>
</template>
<script>
import { bookingStatusMap, paymentStatusMap, mybookingStatusMap, mypaymentStatusMap, bookingColor } from '@/plugins/util.js'
import { runInThisContext } from 'vm';

  export default {
    data(){
      return {
        printprint: false,
      };

    },
    components: {
      mybookingStatusMap,
      bookingStatusMap,
      paymentStatusMap,
      mypaymentStatusMap,
      bookingColor
  },
    props: {
      BookingOrder: {
        type: Object,
      },
    },
    methods: {
      bookingStatusMap,
      paymentStatusMap,
      mybookingStatusMap,
      mypaymentStatusMap,
      bookingColor,
      async copy(copyText){
        window.navigator.clipboard.writeText(copyText);
      }
    },
    updated() {
      console.log(this.BookingOrder);
    },
  };
</script>
<style lang="scss" scoped>
</style>