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

<template>
  <div class="items-list-wrapper">
    <div class="items-list-header">
      <div class="cell">#</div>
      <div class="cell">Item Name</div>
      <div class="cell">HSN</div>
      <div class="cell">Qty</div>
      <div class="cell">Unit Price</div>
      <div class="cell">Discount</div>
      <div class="cell">Taxable Value</div>
      <div class="cell nested-col-header">
        <div>GST</div>
        <div class="nested-col">
          <div class="nested-cell">%</div>
          <div class="nested-cell">cgst</div>
          <div class="nested-cell nested-cell-last">sgst</div>
        </div>
      </div>
      <div class="cell">Total</div>
    </div>
    <div class="item-list">
      <div v-for="(item, index) in props.items" :key="item['id']" class="item-list-row">
        <div class="cell text-center">{{ index + 1 }}</div>
        <div class="cell">{{ item.Brand }} {{ item.Name }}</div>
        <div class="cell">{{ item.HSN }}</div>
        <div class="cell">{{ item.Quantity }}</div>
        <div class="cell">{{ item.UnitPrice }}</div>
        <div class="cell">null</div>
        <div class="cell">{{ item.AmountWithoutGST }}</div>
        <div class="cell nested-col">
          <!-- TODO: check if cgst+sgst or igst needs to be calculated -->
          <div class="nested-cell">{{ item.GSTPercentage }}%</div>
          <div class="nested-cell">{{ item.TotalGSTValue.distribute(2)[0] }}</div>
          <div class="nested-cell nested-cell-last">{{ item.TotalGSTValue.distribute(2)[1] }}</div>
        </div>
        <div class="cell">{{ item.TotalAmount }}</div>
      </div>
    </div>
  </div>
</template>

<style>
.items-list-wrapper {
  border-top: 1px solid gray;
  border-left: 1px solid gray;
}
.cell {
  border-right: 1px solid gray;
  border-bottom: 1px solid gray;
}
.items-list-header, .item-list-row {
  display: grid;
  grid-template-columns: 0.3fr 3fr 0.8fr 0.8fr 1fr 1fr 1.1fr 2fr 0.8fr;
}
.nested-cell {
  border-right: 1px solid gray;
}
.nested-cell-last {
  border-right: none;
}
.items-list-header .cell {
  font-weight: bold;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.item-list {
  display: flex;
  flex-direction: column;
}
.items-list-header .nested-col-header {
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr;
}
.items-list-header .nested-col {
  border-top: 1px solid gray;
}
.nested-col {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
</style>
