<template>
<v-container>
  <v-form ref="purchase" v-model="valid" @change="onFormChange">
    <v-row>
        <v-col>
            <v-autocomplete
                v-model="purchase.customer"
                :items="filteredClients"
                :search="client_search"
                no-data-text="No se hallaron clientes"
                item-title="name"
                item-value="id"
                @update:model-value="onFormChange"
                label="Cliente"
                :rules="[rules.required]"
                required
                class="mr-4"
            ></v-autocomplete>
            <v-btn color="primary" @click="openModal">Agregar Cliente</v-btn>
            <CreateCustomerModal ref="customerModal" @customerCreated="handleNewCustomer"/>
      </v-col>
      <v-col lg="4">
          <v-text-field
              v-model="purchase.date"
              label="Fecha"
              type="datetime-local"
              :rules="[rules.required]"
              required
              readonly
          ></v-text-field>
      </v-col>
     </v-row>
    <v-textarea
      v-model="purchase.notes"
      label="Notas"
      rows="2"
      ></v-textarea>
    <v-divider></v-divider>
    <v-container>
      <v-toolbar>
        <v-toolbar-title secondary>Productos</v-toolbar-title>
      </v-toolbar>
      <v-container v-for="(line, index) in purchase.saleline_set" :key="line.id">
        <v-row>
            <v-col
                lg="9">
            <v-autocomplete
              v-model="line.product"
              :items="filteredProducts"
              :search="product_search"
              @update:modelValue="onProductChange(index)"
              no-data-text="No se hallaron productos"
              item-title="name"
              item-value="id"
              item-subtitle="Price"
              label="Producto"
              :rules="[rules.required]"
              required
              >
              <template v-slot:item="{ props, item }">
                <v-list-item v-bind="props" :title="item.raw.name" :subtitle="formatPrice(item.raw.price)"></v-list-item>
              </template>
            </v-autocomplete>
          </v-col>
          <v-col
              lg="2"
          >
              <v-text-field
                  v-model.number="line.quantity"
                  label="Cantidad"
                  type="number"
                  :rules="[rules.required,rules.positive]"
                  required
              ></v-text-field>
          </v-col>
        </v-row>
        <v-row>
          <v-col>
            <v-text-field
              v-model.number="line.unit_price"
              label="Precio"
              type="number"
              :rules="[rules.required]"
              prefix="$"
              required
              readonly
              ></v-text-field>
          </v-col>
          <v-col>
            <v-text-field
              v-model="line.measuring_unit"
              label="UdM"
              persistent-placeholder="true"
              readonly
              ></v-text-field>
          </v-col>
          <v-col>
            <v-text-field
              type="number"
              :value="calculateSubtotal(line)"
              label="Subtotal"
              prefix="$"
              readonly
                disable
                persistent-placeholder="true"
              ></v-text-field>
            </v-col>
            <v-col>
              <v-btn @click="removeLine(index)" color="red">Eliminar</v-btn>
            </v-col>
        </v-row>
        <v-alert type="warning" :duration="2000" closable v-model="show_alert_lines">
          No se puede eliminar la única línea.
        </v-alert>
      </v-container>
        <v-btn @click="addLine" color="blue">Agregar</v-btn>
        </v-container>
        <v-divider></v-divider>
        <v-text-field
          :value="calculateTotal"
          label="Total"
          prefix="$"
          readonly
          persistent-placeholder="true"
        ></v-text-field>
        <v-container v-if="calculateTotal > 0">
          <v-select
            :items="payment_methods"
            v-model="purchase.payment_method"
            item-title="text"
            item-value="value"
            label="Pago en"
            :rules="[rules.required]"
            required
          ></v-select>
          <v-btn @click="openCasherModal" v-if="purchase.payment_method === 'CASH'">Calcular Devuelta</v-btn>
          <CasherModal :total_purchase="calculateTotal" ref="casherModal"</CasherModal>
        </v-container>
        <v-btn @click="submit" color="green">Comprar</v-btn>
        <v-alert type="error" :duration="2000" closable v-model="show_alert_purchase">
          Verifique los campos obligatorios.
        </v-alert>
  </v-form>
</v-container>
</template>

<script>
  import CustomerForm from './CreateCustomerModal.vue';
  import CasherModal from './CasherModal.vue';
  import { inject } from 'vue';

  export default {
    name: 'DonConfiao',
    components: {
     CustomerForm,
     CasherModal,
   },
   props: {
     msg: String
   },
   data() {
     return {
       api: inject('api'),
       valid: false,
       form_changed: false,
       show_alert_lines: false,
       show_alert_purchase: false,
       client_search: '',
       product_search: '',
       payment_methods: null,
       purchase: {
         date: this.getCurrentDate(),
         customer: null,
         notes: '',
         payment_method: null,
         saleline_set: [{product:'', unit_price: 0, quantity: 0, unit: ''}],
       },
       rules: {
           required: value => !!value || 'Requerido.',
           positive: value => value > 0 || 'La cantidad debe ser mayor que 0.',
       },
         menuItems: [
             { title: 'Inicio', route: '/'},
             { title: 'Compras', route:'/compras'},
         ],
         clients: [],
         products: [],
     };
   },
     created() {
     this.fetchClients();
     this.fetchProducts();
     this.fetchPaymentMethods();
   },
   watch: {
     group () {
       this.drawer = false
     },
   },
   beforeMount() {
      window.addEventListener('beforeunload', this.confirmLeave);
   },
   beforeDestroy() {
      window.removeEventListener('beforeunload', this.confirmLeave);
   },
   computed: {
     calculateTotal() {
       return this.purchase.saleline_set.reduce((total, saleline) => {
         return total + this.calculateSubtotal(saleline);
       }, 0);
     },
     filteredClients() {
       return this.clients.filter(client => {
         if (this.client_search === '') {
           return [];
         } else {
           return client.name.toLowerCase().includes(this.client_search.toLowerCase());
         }
       });
     },
     filteredProducts() {
       return this.products.filter(product => {
         if (this.product_search === '') {
           return [];
         } else {
           return product.name.toLowerCase().includes(this.product_search.toLowerCase());
         }
       });
     },
   },
   methods: {
     openModal() {
      this.$refs.customerModal.openModal();
     },
     onFormChange() {
       this.form_changed = true;
     },
     openCasherModal() {
       this.$refs.casherModal.dialog = true
     },
     confirmLeave(event) {
       if (this.form_changed) {
         const message = '¿seguro que quieres salir? Perderas la información diligenciada';
         event.preventDefault();
         event.returnValue = message;
         return message;
       }
     },
     getCurrentDate() {
         const today = new Date();
         const gmtOffSet = -5;
         const localDate = new Date(today.getTime() + (gmtOffSet * 60 * 60 * 1000));
         // Formatear la fecha y hora en el formato YYYY-MM-DDTHH:MM
         const formattedDate = localDate.toISOString().slice(0,16);
         return formattedDate;
     },
       onProductChange(index) {
           const selectedProductId = this.purchase.saleline_set[index].product;
       const selectedProduct = this.products.find(p => p.id == selectedProductId);
         this.purchase.saleline_set[index].unit_price = selectedProduct.price;
         this.purchase.saleline_set[index].measuring_unit = selectedProduct.measuring_unit;
     },
     fetchClients() {
       this.api.getCustomers()
           .then(data => {
             this.clients = data;
           })
           .catch(error => {
             console.error(error);
           });
     },
       handleNewCustomer(newCustomer){
           this.clients.push(newCustomer);
           this.purchase.customer = newCustomer.id;
       },
     fetchProducts() {
       this.api.getProducts()
           .then(data => {
             this.products = data;
           })
           .catch(error => {
             console.error(error);
           });
     },
     fetchPaymentMethods() {
       this.api.getPaymentMethods()
           .then(data => {
             this.payment_methods = data;
           })
           .catch(error => {
             console.error(error);
           });
     },
     addLine() {
       this.purchase.saleline_set.push({ product: '', unit_price: 0, quantity:0, measuring_unit: ''});
     },
     removeLine(index) {
         if (this.purchase.saleline_set.length > 1) {
             this.purchase.saleline_set.splice(index, 1);
         } else {
           this.show_alert_lines = true;
           setTimeout(() => {
             this.show_alert_lines = false;
           }, 2000);
         }
     },
     calculateSubtotal(line) {
       return line.unit_price * line.quantity;
     },
     async submit() {
       this.$refs.purchase.validate();
         if (this.valid) {
           this.api.createPurchase(this.purchase)
               .then(data => {
                 console.log('Compra enviada:', data);
                 this.$router.push({
                   path: "/summary_purchase",
                   query : {id: parseInt(data.id)}
                 });
               })
           .catch(error => console.error('Error al enviarl la compra:', error));
       } else {
         this.show_alert_purchase = true;
           setTimeout(() => {
             this.show_alert_purchase = false;
           }, 4000);
       }
     },
     navigate(route) {
       this.$router.push(route);
     },
     formatPrice(price) {
       return new Intl.NumberFormat('es-ES', { style: 'currency', currency: 'COP' }).format(price);
     },
   },
     mounted() {
         this.fetchClients();
     }
 };
</script>
<style>
</style>
