<script lang="ts" setup>
import { dateFormat } from 'src/utils/datetime';

// NOTE: Import stores

// NOTE  Import Types
import { Branch } from 'src/stores/branch/types';
import { CustomerBranchRelation, Details } from 'src/stores/quotations/types';
// NOTE: Import Components

defineProps<{
  branch: Branch;
  customer: CustomerBranchRelation;
  details: Details;
}>();
</script>

<template>
  <div class="row items-center q-mb-lg">
    <div class="column" style="width: 50%">
      <img src="/logo.png" width="192px" style="object-fit: scale-down" />
    </div>
    <div
      class="column"
      style="text-align: center; width: 50%; font-weight: 800; font-size: 24px"
    >
      ใบเสนอราคา
    </div>
  </div>

  <article class="detail-card">
    <section class="detail-customer-info">
      <article>
        <b>บริษัท {{ branch.name }}</b>
        <span>
          {{ !branch.moo ? '' : `หมู่.${branch.moo}` }} ต.{{
            branch.subDistrict?.name
          }}
          อ.{{ branch.district?.name }} จ.{{ branch.province?.name }}
          {{ branch.subDistrict?.zipCode }}
        </span>
        <span>เลขประจำตัวผู้เสียภาษี {{ branch.taxNo }}</span>
        <span>เบอร์โทร {{ branch.telephoneNo }}</span>
        <span>{{ branch.webUrl }}</span>
      </article>
      <article>
        <b>ลูกค้า</b>
        <span>
          ต.{{ customer.subDistrict?.name }} อ.{{
            customer.district?.name
          }}
          จ.{{ customer.province?.name }} {{ customer.subDistrict?.zipCode }}
        </span>
        <span>เลขประจำตัวผู้เสียภาษี {{ customer.citizenId }}</span>
        <span>เบอร์โทร {{ customer.telephoneNo }}</span>
      </article>
    </section>
    <section class="detail-quotation-info">
      <div>
        <div>เลขที่ใบเสนอราคา</div>
        <div>{{ details.code }}</div>
      </div>
      <div>
        <div>วันที่ใบเสนอราคา</div>
        <div>{{ dateFormat(details.createdAt, true, false, true) }}</div>
      </div>
      <div>
        <div>ผู้ขาย</div>
        <div>{{ details.createdBy }}</div>
      </div>
      <div>
        <div>เงื่อนไขการชำระ</div>
        <div>
          {{
            {
              Full: $t('quotation.type.fullAmountCash'),
              Split: $t('quotation.type.installmentsCash'),
              BillFull: $t('quotation.type.fullAmountBill'),
              BillSplit: $t('quotation.type.installmentsBill'),
            }[details.payCondition]
          }}
        </div>
      </div>
      <div>
        <div>ชื่องาน</div>
        <div>{{ details.workName }}</div>
      </div>
      <div>
        <div>ผู้ติดต่อ</div>
        <div>{{ details.contactName }}</div>
      </div>
      <div>
        <div>วันครบกำหนดชำระ</div>
        <div>{{ dateFormat(details.dueDate, true, false, true) }}</div>
      </div>
    </section>
  </article>
</template>

<style scoped>
.detail-card {
  display: flex;
  gap: 16px;

  & > * {
    flex-grow: 1;
  }

  & > :first-child {
    max-width: 57.5%;
  }
}

.detail-customer-info {
  display: flex;
  flex-direction: column;
  gap: 16px;

  & > * {
    display: flex;
    flex-direction: column;

    & > :first-child {
      color: var(--main);
    }
  }
}

.detail-quotation-info {
  & > * {
    display: flex;

    & > :first-child {
      color: var(--main);
    }

    & > * {
      width: 50%;
    }
  }
}
</style>
