<script setup lang="ts">
  const props = defineProps(["invoice"])
</script>

<template>
  <div class="print-preview-recipient-info">
    <div class="recipient-info--row1">
      <div class="recipient-info--col1">
      </div>
      <div class="recipient-info--col2">
        <span class="invoice-label">
          <span><strong>INVOICE</strong></span>
          <span>Original for Recipient</span>
        </span>
      </div>
    </div>
    <div class="recipient-info--row2">
      <div class="recipient-info--col1 recipient-contact">
        <div class="label">
          <span><strong>Bill To:</strong></span>
          <span>{{ props.invoice.CustomerName }}</span>
        </div>
        <div class="label">
          <span><strong>Address:</strong></span>
          <span>
            {{ props.invoice.BillingAddress.AddressText }}<br>
            {{ props.invoice.BillingAddress.City }}
            ({{ props.invoice.BillingAddress.PostalCode }}), 
            {{ props.invoice.BillingAddress.State }},
            {{ props.invoice.BillingAddress.Country }}
          </span>
        </div>
        <div class="label">
          <span><strong>Contact:</strong></span>
          <span>{{ props.invoice.CustomerContactName }}</span>
        </div>
        <div class="label">
          <span><strong>Phone:</strong></span>
          <span>{{ props.invoice.CustomerPhone }}</span>
        </div>
        <div class="label">
          <span><strong>Email:</strong></span>
          <span>{{ props.invoice.CustomerEmail }}</span>
        </div>
        <div class="label">
          <span><strong>Website:</strong></span>
          <span>{{ props.invoice.CustomerWebsite }}</span>
        </div>
        <div class="label">
          <span><strong>GSTIN:</strong></span>
          <span>{{ props.invoice.CustomerGstin }}</span>
        </div>
      </div>
      <div class="recipient-info--col2">
        <div class="invoice-meta">
          <div class="label">
            <span><strong>Invoice Number: </strong></span>
            <span>{{ props.invoice.InvoiceNumber }}</span>
          </div>
          <div class="label">
            <span><strong>Invoice Date: </strong></span>
            <span>{{ new Date(props.invoice.InvoiceDate).toLocaleDateString() }}</span>
          </div>
        </div>
        <div class="shipping-address">
          <div class="label">
            <span><strong>Shipping Address:</strong></span>
            <span>
              {{ props.invoice.ShippingAddress.AddressText }}<br>
              {{ props.invoice.ShippingAddress.City }}
              ({{ props.invoice.ShippingAddress.PostalCode }}), 
              {{ props.invoice.ShippingAddress.State }},
              {{ props.invoice.ShippingAddress.Country }}
            </span>
            
            <span><strong>City:</strong></span>
            <span>{{ props.invoice.ShippingAddress.City }}</span>

            <span><strong>State:</strong></span>
            <span>{{ props.invoice.ShippingAddress.State }}</span>

            <span><strong>ZIP Code:</strong></span>
            <span>{{ props.invoice.ShippingAddress.PostalCode }}</span>

            <span><strong>Country:</strong></span>
            <span>{{ props.invoice.ShippingAddress.Country }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style>
.print-preview-recipient-info {
  border: 1px solid gray;
  display: grid;
  grid-template-rows: 2em auto;
  width: 100%;
}
.recipient-info--row1,
.recipient-info--row2 {
  display: grid;
  grid-template-columns: 3fr 4fr;
}
.recipient-info--row1 {
  border-bottom: 1px solid gray;
}
.recipient-info--col1 {
  border-right: 1px solid gray;
}
.recipient-info--col1 {
  padding: 0.1em 0.3em;
}
.invoice-label {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.3em;
}
.recipient-contact {
  display: flex;
  flex-direction: column;
}
.recipient-contact .label {
  display: grid;
  grid-template-columns: 5em auto;
}
.invoice-meta {
  width: 100%;
  border-bottom: 1px solid gray;
  padding: 0.3em 0.3em;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.invoice-meta .label, .shipping-address .label {
  display: grid;
  grid-template-columns: 9em auto;
}
.shipping-address {
  width: 100%;
  padding: 0.1em 0.3em;
}
</style>
