<template>
  <div class="content-header">

    <div class="container-fluid">
      <div class="row mb-2">
        <div class="col-sm-6">

          <h3 class="font-weight-bold">23Bon de Livraison({{ carts.length }})</h3>
        </div><!-- /.col -->

        <div class="col-sm-6">

          <!-- Button trigger modal -->
          <a @click="loadf" class="float-right  btn btn-info">Nouveau</a>
        </div>
      </div>
    </div>
    <form @submit.prevent="addpay">
      <div v-if="bloc" class="row">
        <div class="col-12 ">
          <div class="card">
            <div class="card-header">

              <div class="card-body">
                <div class="row">
                  <div class="col-md-3">

                    <div class="form-group">
                      <label for="exampleFormControlSelect1">client:</label>
                      <select class="form-control" @change="getclienttbyid" v-model="vente.idclient">
                        <option v-for="client in clients" :value="client.id">{{ client.nom }} DH</option>

                      </select>
                      {{ vente.idclient }}
                      <p style="color: red;font-size: 22px; font-weight: bold;"> credit:{{ client.monton }} </p>

                      <p v-if="showclient">ce champ est oblicatoir</p>
                    </div>
                  </div>
                  <div class="col-md-3">
                    <div class="form-group">
                      <label for="exampleFormControlSelect1">transporteur</label>
                      <input v-model="vente.transporteur" type="text" class="form-control">

                    </div>
                  </div>
                  <div class="col-md-3">
                    <div class="form-group">
                      <label for="exampleFormControlSelect1">confirmation</label>
                      <select class="form-control" v-model="vente.idbonenattentsituation">
                        <option v-for="bon in bonenattentsituations" :value="bon.id">{{ bon.situation }}</option>
                      </select>
                    </div>
                  </div>
                  <div class="col-md-3">

                    <div class="form-group">
                      <label for="exampleFormControlSelect1">mode payement</label>
                      <select class="form-control" v-model="vente.idmod">
                        <option v-for="mode in modepayements" :value="mode.id">{{ mode.mode }}</option>
                      </select>

                    </div>




                    <button type="button" class="btn btn-info btn-lg btn-block" data-toggle="modal"
                      data-target="#modal-xl">
                      Aouter Prouit </button>

                    <div class="modal fade" id="modal-xl">
                      <div class="modal-dialog modal-xl">
                        <div class="modal-content">
                          <div class="modal-header">
                        
                              <div v-if="showproduitbyid" class="form-group">
    <label for="exampleInputPassword1">cherche produit</label>
    <input v-model="q1" type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">

  </div>

  <div v-if="showprod" class="form-group">
    <label for="exampleInputPassword1">cherche produit</label>
    <input v-model="q" type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">

  </div>                     

  <div v-if="shoowliu" v-for="lieu in lieustocks" :value="lieu.id">
                              <p class="btn btn-info mr-2 " @click="getcatebaylieux2(lieu.id)">{{ lieu.lieu }}</p>
                            </div>
                            <button @click="shlieu" type="button" class="btn btn-primary ">
                              liste stock
                            </button>

                  

 

                          </div>



                          <div class="modal-body  ">
                            <div class="row">
                              <div v-if="showfirst" class="col-md-2" v-for="tcat in topcat1" :value="tcat.id">

                                <div class="card">
                                  <div class="card-body" style=" padding: 2px !important;">
                                    <img @click="showprduits(tcat.id)" style="width: 100%;height: 80px;padding: 0;"
                                      :src="'img/' + tcat.img" />
                                    <p style="font-weight: bold; color: green;text-align: center;">{{ tcat.topcat }}</p>
                                  </div>
                                </div>
                              </div>
                            </div>






                          </div>


































                          <div v-if="showproduitbyid" class="modal-body  ">



<div class="row">

  <div class="col-md-2" v-for="prod in filterpost1" :value="prod.id">

    <div class="card">

      <div class="card-body" @click=" addcart
        (prod)" style=" padding: 2px !important;">
        <img style="width: 100%;height: 80px;padding: 0;" :src="prod.img" />
        <p style="font-weight: bold; color: green;text-align: center;"> {{ prod.nom }}</p>
        <p style="font-weight: bold; color: red;text-align: center;">prix de vente: {{
          prod.prixvents }} DH</p>
        <p style="font-weight: bold; color:blueviolet;text-align: center;"> prix d'achat:{{
          prod.prixun }} DH</p>
      </div>
    </div>






  </div>
</div>
</div>

                          <div v-if="showprod" class="modal-body  ">

                            <div class="row">

                              <div class="col-md-2" v-for="prod in filterpost" :value="prod.id">

                                <div class="card">

                                  <div class="card-body" @click=" addcart
                                    (prod)" style=" padding: 2px !important;">
                                    <img style="width: 100%;height: 80px;padding: 0;" :src="prod.img" />
                                    <p style="font-weight: bold; color: green;text-align: center;"> {{ prod.nom }}</p>
                                    <p style="font-weight: bold; color: red;text-align: center;">prix de vente: {{
                                      prod.prixvents }} DH</p>
                                    <p style="font-weight: bold; color:blueviolet;text-align: center;"> prix d'achat:{{
                                      prod.prixun }} DH</p>
                                  </div>
                                </div>






                              </div>
                            </div>
                          </div>


                          <div v-if="showtopcat" class="modal-body  ">
                            <div class="row">
                              <div class="col-md-2" v-for="top in topcats" :value="top.id">

                                <div class="card">
                                  <div class="card-body" style=" padding: 2px !important;">
                                    <img @click="showcategorie(top.id)" style="width: 100%;height: 80px;padding: 0;"
                                      :src="'img/' + top.img" />
                                    <p style="font-weight: bold; color: green;text-align: center;">{{ top.topcat }}</p>
                                  </div>
                                </div>






                              </div>
                            </div>
                          </div>

                          <div class="modal-footer">

                            <button type="button" class="btn btn-secondary" data-dismiss="modal">quitter</button>
                          </div>
                        </div>
                      </div>
                      <!-- /.modal-dialog -->
                    </div>
                    <!-- /.modal -->


                  </div>



                </div>

              </div>


            </div>



          </div>
        </div>
      </div>



      <div class="content">

        <div class="card">

          <!-- /.card-header -->
          <div class="card-body">
             <h5> <span style="font-size: 18px;" class="badge badge-warning mt-1">{{ carts.length }}</span> article</h5>
            <div class="table-responsive">
              <table  v-if="table" id="example1" class="table table-bordered display nowrap" cellspacing="0" width="100%">

                <thead>
                  <tr class=" bg-info ">
                    <th style="width: 50px;">supp</th>
                    <th>Code Article</th>
                    <th>Article</th>
                    <th>Désignation plus</th>
                    <th width="40">qty</th>
                    <th>prix de vente</th>
                    <th>Ancien prix</th>
                    <th>prix d achat</th>
                    <th>total</th>


                  </tr>
                </thead>
                <tbody>
                  <tr v-for="cart in carts  ">
                    <td><button class="btn btn-danger" @click="deleteRow(index, cart)"><i
                          class="fas fa-solid fa-trash"></i></button></td>
                    <td style="width:150px !important;" class="text-primary font-bold">{{ cart.id }}</td>
                    <td class="text-primary font-bold">{{ cart.nom }}</td>
                    <td>
                      <div class="form-group">
                        <input type="text" v-model="cart.comme">
                      </div>
                    </td>
                    <td> <input style="width: 40px !important;" v-model="cart.quantite" @keyup="calculeqty(cart,)">
                      <span style="font-size: 18px;" class="badge badge-warning mt-1">{{ cart.stock }}</span>
                    </td>
                    <td><input style="width: 40px !important;" v-model="cart.prixvents" @keyup="handleCalc(cart)"></td>
                    <td> <a class="btn btn-warning" @click="gethystorique(vente.idclient, cart.id)"><i
                          class="fas fa-solid fa-eye"></i></a>



                    </td>


                    <td>

                      <p style="font-size: 18px;" v-if="current == cart.id" @click="showprix2(cart.id)">{{ cart.prixun }}DH
                      </p>
                      <p v-else type="button" class="btn btn-secondary" @click="showprix(cart.id)">
                        <i class="fas fa-solid fa-eye"></i>
                      </p>




                    </td>
                    <td>{{ cart.x }} dh</td>

                  </tr>







                </tbody>

              </table>
            </div>
            <div v-if="bloc2" class="form-group">
              <label for="exampleInputEmail1" class="form-label">commentair</label>
              <input v-model="vente.comment" type="text" class="form-control">
            </div>
          </div>



          <!-- /.card-body -->
        </div>
      </div>
      <div class="content">
        <div v-if="bloc2" class="card">
          <div class="card-body">
            <div class="row">
              <div class="col-md-2">

                <div v-if="vente.idmod == 3 || vente.idmod == 5" class="form-group">
                  <label for="exampleInputEmail1" class="form-label">banque</label>
                  <select class="form-control" v-model="vente.chequebonque">
                    <option v-for="bon in banque" :value="bon.id">{{ bon.banque }}</option>
                  </select>
                  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
                    new
                  </button>
                  <!-- Modal -->
                  <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog"
                    aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div class="modal-dialog" role="document">

                      <div class="modal-content bg-info text-white">
                        <div class="modal-body">
                          <form @submit.prevent="addbanques" method="POST" action="">
                            <div class="form-group">
                              <label for="exampleInputEmail1">ajouter banque</label>
                              <input v-model="addbanque" type="text" class="form-control">


                            </div>


                            <button type="button" class="btn btn-secondary" data-dismiss="modal">quitter</button>
                            <button type="submit" class="btn btn-warning float-right">enregistrer</button>
                          </form>
                        </div>

                      </div>
                    </div>
                  </div>
                </div>



              </div>

              <div class="col-md-2">
                <div v-if="vente.idmod == 3 || vente.idmod == 5" class="form-group">
                  <label for="exampleInputEmail1" class="form-label">date</label>
                  <input v-model="vente.date" type="date" class="form-control" required>
                </div>

              </div>
              <div class="col-md-2">

                <div v-if="vente.idmod == 3 || vente.idmod == 5" class="form-group">
                  <label class="form-label">numero cheque</label>
                  <input v-model="vente.numerocheque" type="text" class="form-control" required>

                </div>
                <label v-if="vente.idmod == 5" class="form-label"> cheque: </label>
                <input @keyup="calculcheque()" v-if="vente.idmod == 5" v-model="vente.montant" type="text"
                  class="form-control mt-2" required>
                <label v-if="vente.idmod == 5" class="form-label"> espece: </label>
                <input disabled v-if="vente.idmod == 5" v-model="vente.espece" type="text" class="form-control mt-2"
                  required>
              </div>

              <div class="col-md-3">

                <div v-if="vente.idmod == 2" class="form-group">
                  <label for="exampleFormControlSelect1">credit urgent</label>
                  <select class="form-control" v-model="vente.idcrediturgent">
                    <option v-for="credit in crediturgent" :value="credit.id">{{ credit.crediiturgent }}</option>
                  </select>

                </div>



              </div>
              <div class="col-md-3">
                <p class="font-weight-bold" style="    font-size: 30px;
    font-weight: bold;
    color: #17a2b8;"> total:{{ vente.subtotal }} DH</p>
                <div class="form-group">
                  <label for="exampleInputEmail1" class="form-label" style="    font-size: 30px;
    font-weight: bold;
    color: #17a2b8;">remise</label>
                  <input style="width: 100px !important;font-size: 30px" v-model="vente.remise" @keyup="changeremise()" type="text"
                    class="form-control">
                </div>
                <p style="    font-size: 30px;
    font-weight: bold;
    color: #17a2b8;"> total:{{ vente.total }} DH</p>
                <br>
                <div v-if="vente.idmod == 2" class="form-group">
                  <label for="exampleInputEmail1" class="form-label">avance</label>
                  <input v-model="vente.avance" type="text" class="form-control" required>
                </div>

                <button type="submit" value="Open" target="_blank" class="btn btn-success">enregistrer avec
                  facture</button>




              </div>



            </div>
          </div>
        </div>
      </div>
    </form>


    <div>
    <input type="text" v-model="inputValue1" @focus="activeInput = 1" />
    <input type="text" v-model="inputValue2" @focus="activeInput = 2" />
    <div>
      <button v-for="number in numbers" :key="number" @click="appendToActiveInput(number)">{{ number }}</button>
    </div>
  </div>

    
  </div>
</template>
   
<script>
export default {
  data() {
    return {
      inputValue1: '',
      inputValue2: '',
      activeInput: null,
      numbers: [1, 2, 3, 4, 5, 6, 7, 8, 9],
      timeout: undefined,
      current:0,
      shoowliu: false,
      q: '',
      q1: '',
      bloc: true,
      bloc2: false,
      buttonpdf1: false,
      addbanque: '',
      url: './ventepdf',
      url2: './ventepdfsansentete',
      qty: 1,
      showfirst: true,
      showprod: false,
      showtopcat: false,
      showcat: false,
      table: false,
      csrf: document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
      showclient: false,
      showcat: false,
      showmode: false,
      showproduit: false,
      showproduitbyid: false,
      showdate: false,
      banque: [],
      hystoriqprix: [],
      remise: 0,
      idproduit: '',
      prods: [],
      prods1: [],
      produit: [],
      clients: [],
      client: [],
      lieustocks: [],
      topcats: [],

      topcat1: [],
      crediturgent: [],
      modepayements: [],
      bonenattentsituations: [],
      lastidvente: [],
      produitid: [],
      prixdevente: '',
      porcentag: '',
      tva: '',


      //

      danger: false,

      responseData: [],             //
      carts: [],


      vente: {
        idbanque: '',
        idcrediturgent: 1,
        chequebonque: 1,
        dateecheance: '',
        numerocheque: '',
        transporteur: '...',
        idbonenattentsituation: 2,
        idlieutoock: '',
        montant: 0,
        espece: 0,
        comment: '.',
        comme: '.',
        idmod: 1,
        dateecheance: '',
        date: '',
        avance: '',
        idclient: 1,
        remise: '',
        //prixtotal:'',
        subtotal: 0,
        total: 0,
      }
    }
  },
  mounted() {
   this.getclients();
    this.getbonenattentsituation();
     this.getmode();
    this.chercheroduit();
    
    this.getclienttbyid()
   
    this.getlieustock();
   
    this.getlastidvente();
   // this.getcatebaylieuxfirst();
    this.getcrediturgent();
    this.getbanque();
  },



  methods: {
    appendToActiveInput(number) {
      if (this.activeInput === 1) {
        this.inputValue1 += number;
      } else if (this.activeInput === 2) {
        this.inputValue2 += number;
      }
    },
    getclients() {
      axios.get('./clients')
        .then(response => {

          this.clients = response.data.clients

        })
        .catch(error => {
          console.log(error);
        })
    },

    getbanque() {

      axios.get('./api/banque')
        .then(response => {
          this.banque = response.data.banque;


        })
        .catch(error => {
          console.log(error);
        })
    },

    getbonenattentsituation() {

axios.get('./api/bonenattentsituations')
  .then(response => {
    this.bonenattentsituations = response.data.bonenattentsituations;

  })
  .catch(error => {
    console.log(error);
  })
},
 
    shlieu() {
      this.shoowliu = true;
      this.showproduitbyid=false;
    },
    showprix(id) {
      this.current = id;
    },
    showprix2(id) {
      this.current = 0;
    },
    addbanques() {
      let formdata = new FormData();
      formdata.append('banque', this.addbanque)


      axios.post('./addbanque', formdata)

        .then(function (response) {
          Swal.fire(
            'parfait!',
            'vente bien enregistrer!',
            'success'
          )



          $('#exampleModal').modal('hide');


        })
        .catch(function (error) {
          console.log(error);
        });

    },

    calculeqty(cart) {
      let name = this.carts.findIndex(item => item.id === cart.id);

      if (name != -1) {
        if (this.carts[name].quantite > this.carts[name].stock) {
          this.carts[name].quantite = this.carts[name].stock;
          alert("matfoutch had lhsab " + this.carts[name].stock);
          this.carts[name].x = this.carts[name].prixvents * this.carts[name].quantite;
        } else {
          this.carts[name].x = this.carts[name].prixvents * this.carts[name].quantite;

        }
      }


      var subtotal;
      subtotal = this.carts.reduce(function (sum, product) {
        var lineTotal = parseFloat(product.x);
        if (!isNaN(lineTotal)) {
          return sum + lineTotal;
        }
      }, 0);

      this.vente.subtotal = subtotal;
      this.vente.total = subtotal;
      this.vente.remise = 0;
      this.vente.avance = 0;
      this.vente.idcrediturgent = 1;



    }
    ,
  
    handleCalc(cart) {
      clearTimeout(this.timeout);

      // Set a new timeout for 3 seconds
      this.timeout = setTimeout(() => {
        this.calculeprix(cart);
      }, 1500);
    },
    
    calculeprix(cart) {

      let name = this.carts.findIndex(item => item.id === cart.id);



      if (name != -1) {
        var porcentage = this.carts[name].prixun * 3 / 100;
        var res = this.carts[name].prixun+porcentage
        if (this.carts[name].prixun >= this.carts[name].prixvents) {

         alert("il faut depasser ce montant pour la vente " + res);
          ;
        } else
          this.carts[name].x = this.carts[name].prixvents * this.carts[name].quantite;

      }


      var subtotal;
      subtotal = this.carts.reduce(function (sum, product) {
        var lineTotal = parseFloat(product.x);
        if (!isNaN(lineTotal)) {
          return sum + lineTotal;
        }
      }, 0);

      this.vente.subtotal = subtotal;
      this.vente.total = subtotal;
      this.vente.remise = 0;
      this.vente.avance = 0;
      this.vente.idcrediturgent = 1;



    }
    ,

    loadf() {
      location.reload();
      buttonpdf1 = true;

    },

    getclients() {
      axios.get('./clients')
        .then(response => {

          this.clients = response.data.clients

        })
        .catch(error => {
          console.log(error);
        })
    },

    getbanque() {

      axios.get('./api/banque')
        .then(response => {
          this.banque = response.data.banque;


        })
        .catch(error => {
          console.log(error);
        })
    },


    getlieustock() {

      axios.get('./api/lieustock')
        .then(response => {
          this.lieustocks = response.data.lieustock;


        })
        .catch(error => {
          console.log(error);
        })
    },
    showcategorie(id) {
      this.showcat = false;
      this.showtopcat = false;
      this.showprod = true;
      this.showfirst = false;
      this.showproduitbyid=false;
      axios.get('./getproduitbycat/' + id)
        .then(response => {
          this.prods = response.data.produits;

        })
        .catch(error => {
          console.log(error);
        })
    },
    getcatebaylieuxfirst() {
      this.showfirst = true,
        this.showtopcat = false;
      this.showcat = false;
      this.showprod = false;
      axios.get('./api/topcatbyid/1')
        .then(response => {
          this.topcat1 = response.data.topcats;
          this.vente.idlieutoock = 1;
          this.showtopcat = false;
          this.showcat = false;
          this.showprod = false;
          this.showfirst = true;
          this.showproduitbyid=false;
        })
        .catch(error => {
          console.log(error);
        })
    },
    getcatebaylieux() {
      this.showtopcat = true;
      this.showcat = false;
      this.showprod = false;
      this.showfirst = false;
      axios.get('./api/topcatbyid/' + this.vente.idlieutoock)
        .then(response => {
          this.topcats = response.data.topcats;
          this.showtopcat = true;
          this.showcat = false;
          this.showprod = false;
          this.showfirst = false;

        })
        .catch(error => {
          console.log(error);
        })
    },
    getcatebaylieux2(id) {
      this.vente.idlieutoock = id;
      this.showtopcat = true;
      this.showcat = false;
      this.showprod = false;
      this.showfirst = false,
        axios.get('./api/topcatbyid/' + id)
          .then(response => {
            this.topcats = response.data.topcats;
            this.showtopcat = true;
            this.showcat = false;
            this.showprod = false;
            this.showfirst = false;

          })
          .catch(error => {
            console.log(error);
          })
    },

    showprduits(id) {
      this.showcat = false;
      this.showtopcat = false;
      this.showprod = true;
      this.showfirst = false;
      axios.get('./getproduitbycat/' + id)
        .then(response => {
          this.prods = response.data.produits;

        })
        .catch(error => {
          console.log(error);
        })
    },


    /*
   var subtotal;
                subtotal = this.carts.reduce(function (sum, product) {
                    var lineTotal = parseFloat(product.total);
                    if (!isNaN(lineTotal)) {
                        return sum + lineTotal;
                    }
                }, 0);
    this.subtotal=subtotal;
    //this.tva=this.subtotal*this.porcentag;
    //this.vente.prixtotal=this.subtotal+this.tva;
  this.total=this.subtotal;
             
        
 */
    getbonenattentsituation() {

      axios.get('./api/bonenattentsituations')
        .then(response => {
          this.bonenattentsituations = response.data.bonenattentsituations;

        })
        .catch(error => {
          console.log(error);
        })
    },
    getmode() {

      axios.get('./modepayements')
        .then(response => {
          this.modepayements = response.data.modepayements;

        })
        .catch(error => {
          console.log(error);
        })
    },
    getproduitbycat() {

      axios.get('./getproduitbycat/' + this.vente.idcategorie)
        .then(response => {
          this.prods = response.data.produits;

        })
        .catch(error => {
          console.log(error);
        })
    },
    getproduitbyid() {

      axios.get('./produitbyid/' + this.idproduit)
        .then(response => {
          this.produit = response.data.produit;
          this.prixdevente = this.produit.prixvents

        })
        .catch(error => {
          console.log(error);
        })
    },
    chercheroduit(){
    
      axios.get('./api/produits')
        .then(response => {
          this.prods1 = response.data.produits; 
          this.showproduitbyid=true;
this.showtopcat = false;
            this.showcat = false;
            this.showprod = false;
            this.showfirst = false;
           
        })
        .catch(error => {
          console.log(error);
        })
    


    },



    getcrediturgent() {
      axios.get('./api/crediiturgent')
        .then(response => {

          this.crediturgent = response.data.crediiturgent

        })
        .catch(error => {
          console.log(error);
        })
    },
    getclienttbyid() {

      axios.get('./clientbyid/' + this.vente.idclient)
        .then(response => {
          this.client = response.data.client

        })
        .catch(error => {
          console.log(error);
        })
    },

    gethystorique(client, produit) {
      //alert(client+'=>'+produit);

      axios.get('./api/gethystorique/' + client + '/' + produit)
        .then(response => {
          this.hystoriqprix = response.data.hystoriqprix;
          alert(this.hystoriqprix.prixvente + 'DH');

        })
        .catch(error => {
          console.log(error);
        })
      return this.hystoriqprix;
    },

    addcart(produit) {

      let name = this.carts.findIndex(item => item.id === produit.id);
      /*if(produit.stock<0){
    alert('ce produit est epuisé');
    
    return;
      }else{*/
      if (name != -1) {
        this.carts[name].quantite++;
        this.carts[name].x = this.carts[name].prixvents * this.carts[name].quantite;

      } else {
        this.carts.push(produit);
        produit.quantite = 1;
        produit.comme = this.vente.comme;
        produit.x = produit.prixvents * produit.quantite;

      }




      var subtotal;
      subtotal = this.carts.reduce(function (sum, product) {
        var lineTotal = parseFloat(product.x);
        if (!isNaN(lineTotal)) {
          return sum + lineTotal;
        }
      }, 0);

      this.vente.subtotal = subtotal;
      this.vente.total = subtotal;
      this.vente.remise = 0;
      this.vente.avance = 0;
      this.vente.idcrediturgent = 1;

      this.table = true;

      this.bloc2 = true;
      this.q1='';
      this.vente.idlieutoock= 1;
      /*}*/
    },


    getlastidvente() {
      axios.get('./api/lastid')
        .then(response => {

          this.lastidvente = response.data.lasid

        })
        .catch(error => {
          console.log(error);
        })
    },
    /*  
      //post
      addpay(){
       
 
       //let pdf2=this.url2+'/'+ (this.lastidvente.id+1);
     //   axios.post('./addvente', {   cart:this.carts,
 
       
 
      },
      */
    async addpay() {

      try {

        const response = await axios.post('./addvente', {

          cart: this.carts,
          client: this.vente.idclient,
          idlieutoock: this.vente.idlieutoock,
          idmod: this.vente.idmod,
          prixtotal: this.vente.total,
          id: this.vente.idproduit,
          cart: this.carts,
          comment: this.vente.comment,
          qty: this.vente.qty,
          avance: this.vente.avance,

          transporteur: this.vente.transporteur,
          bonstatut: this.vente.idbonenattentsituation,
          numero: this.vente.numerocheque,
          boonque: this.vente.chequebonque,
          date: this.vente.date,
          remise: this.vente.remise,
          crediturgent: this.vente.idcrediturgent,
          chequepart: this.vente.montant,
          especepart: this.vente.espece,
        });
        /*      Swal.fire(
           'parfait!',
           'vente bien enregistrer!',
           'success'
         );*/
        if (this.vente.idbonenattentsituation == 1) {
          this.carts = '';
          this.total = 0;
          this.subtotal = 0;
          this.vente.comment = '';
          this.vente.remise = '';
          this.vente.idlieutoock = '';
          this.vente.transporteur = '';
          this.vente.idbonenattentsituation = '';
          this.vente.idclient = '';
          this.vente.idmod = '';

          this.bloc = false;
          this.bloc2 = false;
          alert("facture en attend bien enregiistrer");
        } else {
          this.responseData = response.data.vente;
          let pdf = this.url + '/' + (this.responseData.id);
          window.open(pdf, '_blank');
          this.carts = '';
          this.total = 0;
          this.subtotal = 0;
          this.vente.comment = '';
          this.vente.remise = '';
          this.vente.idlieutoock = '';
          this.vente.transporteur = '';
          this.vente.idbonenattentsituation = '';
          this.vente.idclient = '';
          this.vente.idmod = '';

          this.bloc = false;
          this.bloc2 = false;
        }

      } catch (error) {
        throw error;

      };
    },












    deleteRow(index, cart) {
      var idx = this.carts.indexOf(cart);

      if (idx > -1) {
        this.carts.splice(idx, 1);
      }
      var subtotal, total;
      subtotal = this.carts.reduce(function (sum, product) {
        var lineTotal = parseFloat(product.x);
        if (!isNaN(lineTotal)) {
          return sum + lineTotal;
        }
      }, 0);
      this.vente.subtotal = subtotal;
      this.vente.total = subtotal;
      //cart.prix='';
      //this.vente.qty[index]='';
    },






  },


  computed: {




    changeremise() {
      this.vente.total = this.vente.subtotal - this.vente.remise;
      this.vente.espece = this.vente.total - this.vente.montant;
      return this.vente.total;

    },
    calculcheque() {
      this.vente.espece = this.vente.total - this.vente.montant;

      return this.vente.total;
    },

    filterpost() {
      return this.prods.filter(prod => {
        return prod.nom.toLowerCase().includes(this.q.toLowerCase());
      })
    },
    filterpost1() {
     
      return this.prods1.filter(prod => {
        return prod.nom.toLowerCase().includes(this.q1.toLowerCase());
      })
    }

  },

}

$(document).ready( function () {
  $('#example1').DataTable({
      responsive:true
    });
} );

</script>
