ShowEasyFrontEnd/FrontEnd/components/booking/Modal/ViewDetailsModal.vue

<template>
  <modal name="ViewDetails" :clickToClose="false">
    <div class="tw-text-base-primary">
      <div class="modal-header tw-flex tw-w-full tw-justify-between tw-mb-[15px]">
        <div class="t18 tw-mr-[120px]">{{ $t('View Details') }}</div>
        <button class="close tw-transition tw-btn-md" @click="$modal.hide('ViewDetails')"></button>
      </div>
      <div
        class="modal-content tw-bg-[#FFFFFF] tw-flex tw-flex-col tw-body-4 tw-p-[15px] tw-rounded-[10px] md:tw-items-center md:tw-flex-row md:tw-justify-between">
        <div class="tw-mb-[10px] tw-font-bold md:tw-mb-[0px] md:tw-mr-[105px] tw-justify-items-start">
          {{ $t('Total Amount')}}
        </div>
        <div>{{ TotalAmount }} {{ Currency }}</div>
      </div>
      <!--div class="modal-content tw-body-4 tw-text-[#7c7c7c] tw-bg-[#FFFFFF] tw-p-[15px] tw-rounded-[10px] md:tw-body-3">
        <div class="tw-flex md:tw-mb-[12px]">
          <img src="~/assets/svg/u_check-circle.svg" class="tw-h-[20px] tw-w-[20px] tw-mr-[10px]" />
          <div class="tw-flex tw-flex-col tw-text-[#7c7c7c] tw-w-full md:tw-flex-row md:tw-justify-between">
            <div class="tw-mb-[6px] tw-font-bold">Deposit (15%)</div>
            <div class="tw-body-5 md:tw-body-3">
              ${{ ViewDetails.Deposit }}{{ Currency }}
            </div>
          </div>
        </div>
        <div class="tw-border-solid tw-border-neutrals-200 tw-border-[1px] tw-mt-[14px] tw-mb-[10px] md:tw-hidden">
        </div>
        <div class="tw-flex md:tw-mb-[12px]">
          <img src="~/assets/svg/u_check-circle.svg" class="tw-h-[20px] tw-w-[20px] tw-mr-[10px]" />
          <div class="tw-flex tw-flex-col tw-text-[#7c7c7c] tw-w-full md:tw-flex-row md:tw-justify-between">
            <div class="tw-mb-[6px] tw-font-bold">First Payment (10%)</div>
            <div class="tw-body-5 md:tw-body-3">
              ${{ ViewDetails.FirstPayment }}TWD
            </div>
          </div>
        </div>
        <div class="tw-border-solid tw-border-neutrals-200 tw-border-[1px] tw-mt-[14px] tw-mb-[10px] md:tw-hidden">
        </div>
        <div class="tw-flex md:tw-justify-items-center md:tw-mb-[12px]">
          <img src="~/assets/svg/u_check-circle.svg" class="tw-h-[20px] tw-w-[20px] tw-mr-[10px]" />
          <div class="tw-flex tw-flex-col tw-text-[#7c7c7c] md:tw-flex-row md:tw-justify-between">
            <div class="tw-mb-[12px] tw-font-bold">Second Payment (25%)</div>
            <div class="tw-grid tw-grid-cols-[20px_auto] tw-gap-[4px] tw-items-center tw-mb-[12px] md:tw-mx-[30px]">
              <img src="~/assets/svg/Alert.svg" />
              <div class="tw-body-5 tw-text-worning md:tw-body-4">
                Remittance only
              </div>
            </div>
            <div class="tw-body-5 md:tw-body-3">
              ${{ ViewDetails.SecondPayment }}TWD
            </div>
          </div>
        </div>
        <div class="tw-border-solid tw-border-neutrals-200 tw-border-[1px] tw-mt-[14px] tw-mb-[10px] md:tw-hidden">
        </div>
        <div class="tw-flex md:tw-mb-[12px]">
          <img src="~/assets/svg/u_check-circle_disable.svg" class="tw-h-[20px] tw-w-[20px] tw-mr-[10px]" />
          <div class="tw-flex tw-flex-col te-text-[#7c7c7c] tw-w-full md:tw-flex-row md:tw-justify-between">
            <div class="tw-mb-[12px] tw-font-bold tw-text-neutrals-800">
              Third Payment (30%)
            </div>
            <div class="tw-grid tw-grid-cols-[20px_auto] tw-gap-[4px] tw-items-center tw-mb-[12px] md:tw-ml-[17px]">
              <img src="~/assets/svg/Alert.svg" />
              <div class="tw-body-5 tw-text-worning md:tw-body-4">
                Remittance only
              </div>
            </div>
            <div class="tw-body-5 tw-text-primary-1 tw-font-bold md:tw-body-3">
              ${{ ViewDetails.ThirdPayment }}TWD
            </div>
          </div>
        </div>
        <div class="tw-border-solid tw-border-neutrals-200 tw-border-[1px] tw-mt-[14px] tw-mb-[10px] md:tw-hidden">
        </div>
        <div class="tw-flex md:tw-mb-[12px]">
          <img src="~/assets/svg/u_check-circle_disable.svg" class="tw-h-[20px] tw-w-[20px] tw-mr-[10px]" />
          <div class="tw-flex tw-flex-col tw-text-[#7c7c7c] tw-w-full md:tw-flex-row md:tw-justify-between">
            <div class="tw-mb-[6px] tw-font-bold">Final Payment (20%)</div>
            <div class="tw-body-5 md:tw-body-3">
              ${{ ViewDetails.FinalPayment }}TWD
            </div>
          </div>
        </div>
        <div class="tw-border-solid tw-border-neutrals-200 tw-border-[1px] tw-mt-[14px] tw-mb-[10px] md:tw-my-[12px]" >
        </div>
        <div class="tw-flex tw-ml-[30px]">
          <div class="tw-flex tw-flex-col tw-text-neutrals-600 tw-w-full md:tw-flex-row md:tw-justify-between">
            <div class="tw-mb-[6px] tw-font-bold">{{ $t('Total Amount')}}</div>
            <div class="tw-body-5 md:tw-body-3">
              ${{ TotalAmount }}TWD
            </div>
          </div>
        </div>
      </div-->
    </div>
  </modal>
</template>
<script>
export default {
  name: "ViewDetails",
  props: {
    payments:{},
  },
  data() {
    return {};
  },
  props: {
    ViewDetails: {
      type: Array,
    },
    Currency:{
      type:String,
    },
  },
  computed:{
    TotalAmount(){
      let TotalAmount = 0 ;
      for (let i in  this.ViewDetails) {
        TotalAmount += this.ViewDetails[i].amount;
      }
      return TotalAmount;
    }
  }
};
</script>
<style lang="scss" scoped>
.close {
  position: absolute;
  right: 25px;
  top: 25px;
  background-image: url("~/assets/svg/close.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 14px;
  height: 14px;

  @media (min-width: 1366px) {
    position: relative;
    right: initial;
    top: initial;
  }
}

:deep() {
  .v--modal {
    background-color: #f8f8f8 !important;
    text-align: left;
    border-radius: 16px;
    box-shadow: 0 20px 60px -2px rgb(27 33 58 / 40%);
    padding: 20px;
    max-width: max-content;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 auto;
    height: auto !important;
    vertical-align: middle;
  }

  .v--modal-overlay {
    position: fixed;
    box-sizing: border-box;
    left: 0;
    top: 0;
    width: max-content;
    height: auto;
    background: rgba(0, 0, 0, 0.2);
    z-index: 999;
    opacity: 1;
  }

  .v--modal-top-right {
    display: block;
    position: fixed;
    right: 0;
    top: 0;
  }

  .v--modal-background-click {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .v--modal-box {
    margin-left: 60px;
    margin-right: 60px;

    @media (min-width: 768px) {
      margin-left: 67px;
      margin-right: 67px;
    }
  }
}
</style>