<template>
  <v-container>
    <v-toolbar>
      <v-toolbar-title> Cuadre de Tarro: {{ id }}</v-toolbar-title>
    </v-toolbar>
    <v-card>
      <v-card-text>
        <v-text-field
          v-model="reconciliation.date_time"
          label="Fecha"
          required
          readonly
        ></v-text-field>
        <v-text-field
          v-model="reconciliation.reconcilier"
          label="Cajero"
          required
          readonly
        ></v-text-field>
        <v-text-field
          v-model="reconciliation.total_cash_purchases"
          label="Total Ventas en efectivo"
          prefix="$"
          type="number"
          readonly
        ></v-text-field>
        <v-text-field
          v-model="reconciliation.cash_taken"
          label="Dinero Recogido"
          prefix="$"
          type="number"
        ></v-text-field>
        <v-text-field
          v-model="reconciliation.cash_discrepancy"
          label="Descuadre"
          prefix="$"
          type="number"
        ></v-text-field>
        <v-tabs v-model="tab">
          <v-tab
            v-for="(elements, paymentMethod) in purchases"
            :key="paymentMethod"
          >
            {{ paymentMethod }}&nbsp; <CurrencyText :value="elements.total" />
          </v-tab>
        </v-tabs>
        <v-tabs-window v-model="tab">
          <v-tabs-window-item
            v-for="(elements, paymentMethod) in purchases"
            :key="paymentMethod"
          >
            <v-table>
              <thead>
                <tr>
                  <th>Id</th>
                  <th>Fecha</th>
                  <th>Cliente</th>
                  <th>Total</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="purchase in elements.purchases" :key="purchase.id">
                  <td><v-btn @click="openSummaryModal(purchase.id)">{{ purchase.id }}</v-btn></td>
                  <td>{{ purchase.date }}</td>
                  <td>{{ purchase.customer }}</td>
                  <td><CurrencyText :value="purchase.total" /></td>

                </tr>
              </tbody>
            </v-table>

          </v-tabs-window-item>
        </v-tabs-window>
        <SummaryPurchaseModal :id="selectedPurchaseId" ref="summaryModal" />
      </v-card-text>
    </v-card>
  </v-container>
</template>
<script>
  import { inject } from 'vue';

  export default {
    name: 'ReconciliationJar View',
    props: {
      msg: String,
      id: {
        type: String,
        required: true
      }
    },
    data () {
      return {
        tab: '0',
        selectedPurchaseId: null,
        api: inject('api'),
        valid: null,
        reconciliation: {
        },
        purchases: {},
      };
    },
    created() {
      if (this.id) {
        this.fetchReconciliation(this.id);
      } else {
        console.error('No se proporcionó ID');
      }
    },
    methods: {
      fetchReconciliation(reconciliationId) {
        this.api.getReconciliation(reconciliationId)
            .then(data => {
              this.reconciliation = data;
              this.groupPurchases();
            })
            .catch(error => console.error(error));
      },
      groupPurchases() {
        if (this.reconciliation.Sales) {
          this.purchases = this.reconciliation.Sales.reduce((grouped, sale) => {
            const paymentMethod = sale.payment_method;
            if (!grouped[paymentMethod]) {
              grouped[paymentMethod] = {
                purchases: [],
                total: 0,
              };
            }
            grouped[paymentMethod].purchases.push(sale);
            grouped[paymentMethod].total += sale.total;
            return grouped;
          }, {});
        }
      },
      openSummaryModal(id) {
        this.selectedPurchaseId = id;
        this.$refs.summaryModal.dialog = true;
      },
    },
  }
</script>
