<template>

  <v-container>
    <v-container v-show="!id">
      <v-toolbar>
        <v-toolbar-title> No se indicó Id de la compra</v-toolbar-title>
      </v-toolbar>
    </v-container>
    <v-container v-show="id">
      <v-toolbar>
        <v-toolbar-title> Resumen de la compra {{ id }}</v-toolbar-title>
      </v-toolbar>
      <v-list>
        <v-list-item>
            <v-list-item-title>Fecha:</v-list-item-title>
            <v-list-item-subtitle>{{ purchase.date }}</v-list-item-subtitle>
        </v-list-item>
        <v-list-item>
            <v-list-item-title>Cliente:</v-list-item-title>
            <v-list-item-subtitle v-if="purchase.customer">{{ purchase.customer.name }}</v-list-item-subtitle>
        </v-list-item>
        <v-list-item>
            <v-list-item-title>Pagado en:</v-list-item-title>
            <v-list-item-subtitle v-if="purchase.payment_method">{{ purchase.payment_method }}</v-list-item-subtitle>
        </v-list-item>
        <v-list-item>
            <v-list-item-title>Total:</v-list-item-title>
            <v-list-item-subtitle v-if="purchase.lines">{{ currencyFormat(calculateTotal(purchase.lines)) }}</v-list-item-subtitle>
        </v-list-item>
      </v-list>
      <v-data-table-virtual
        :headers="headers"
        :items="purchase.lines"
      >
        <template v-slot:item.unit_price="{ item }">
          {{ currencyFormat(item.unit_price) }}
        </template>
        <template v-slot:item.subtotal="{ item }">
          {{ currencyFormat(calculateSubtotal(item.unit_price, item.quantity)) }}
        </template>
      </v-data-table-virtual>
      <v-alert type="info" class="my-4">
        Recuerda adicionar a la planilla física lo siguiente
        <v-data-table
          :headers="headersTemplate"
          :items="[purchase]"
          item-key="id"
          hide-default-footer
        >
          <template v-slot:item="{ item }">
            <tr>
              <td>{{ item.id }}</td>
              <td>{{ item.date }}</td>
              <td><span v-if="item.customer">{{ item.customer.name }}</span></td>
              <td><span v-if="item.lines">{{ currencyFormat(calculateTotal(item.lines)) }}</span></td>
            </tr>
          </template>
        </v-data-table>
      </v-alert>
      <div class="text-center">
        <v-btn :to="{ path: '/' }" color="green">Ir al inicio</v-btn>
      </div>
    </v-container>
  </v-container>
</template>

<script>
  import { inject } from 'vue';

  export default {
    name: 'SummaryPurchase',
    props: {
      msg: String,
      id: Number
    },
    data () {
      return {
        api: inject('api'),
        purchase: {},
        headers: [
          { title: 'Producto', value: 'product.name' },
          { title: 'Precio', value: 'unit_price' },
          { title: 'Cantidad', value: 'quantity' },
          { title: 'Subtotal', value: 'subtotal' },
        ],
        headersTemplate: [
          {title: 'Compra', value: 'id'},
          {title: 'Fecha', value: 'date'},
          {title: 'Nombre', value: 'customer.name'},
          {title: 'Valor', value: ''},
        ],
      };
    },
    created() {
      if (this.id) {
        this.fetchPurchase(this.id);
      } else {
        console.error('No se proporcionó un ID de compra.');
      }
    },
    methods: {
      fetchPurchase(purchaseId) {
        this.api.getSummaryPurchase(purchaseId)
          .then(data => {
            this.purchase = data;
          })
          .catch(error => {
            console.error(error);
          });
      },
      currencyFormat(value) {
        return new Intl.NumberFormat('es-CO', { style: 'currency', currency: 'COP' }).format(value);
      },
      calculateSubtotal(price, quantity) {
        price = parseFloat(price || 0);
        quantity = parseFloat(quantity || 0);
        return price * quantity;
      },
      calculateTotal(lines) {
        let total = 0;
        lines.forEach(line => {
          total += this.calculateSubtotal(line.unit_price, line.quantity);
        });
        return total;
      }
    },
  };
</script>
<style>

</style>
