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

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

          <h3 class="font-weight-bold">Avoir({{ carts.length }})5</h3>
        </div><!-- /.col -->

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

          <!-- Button trigger modal -->
       
        </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-weight: bold;"> credit:{{ client.monton }} </p>

                      <p v-if="showclient">ce champ est oblicatoir</p>
                    </div>
                  </div>


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






                    <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">
                            <h5 class="modal-title">


                            </h5>

                            <div v-if="showprod" class="form-controller">
                              <label>cherher</label>
                              <input v-model="q" type="text">
                            </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-success">
                              liste stoock
                            </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="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">
            <div class="table-responsive">
              <h5> <span style="font-size: 18px;" class="badge badge-warning mt-1">{{ carts.length }}</span> article</h5>
              <table style="max-height:300px;" v-if="table" id="example2" class="table table-bordered table-hover">
                <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>

          
      
          
              <div class="col-md-3">
                <p class="font-weight-bold"> total:{{ vente.subtotal }} DH</p>
    
                <p> total:{{ vente.total }} DH</p>
              

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




              </div>



            </div>
          </div>
        </div>
      </div>
    </form>
  </div>
</template>
   
<script>
export default {
  data() {
    return {
      timeout: undefined,
      current: 0,
      shoowliu: false,
      q: '',
      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,
      showdate: false,
      banque: [],
      hystoriqprix: [],
      remise: 0,
      idproduit: '',
      prods: [],
      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,
      }
    }
  },
  created() {

    this.getclients();
    this.getclienttbyid()
    //this.getmode();
    this.getlieustock();
    this.getbonenattentsituation();
    this.getlastidvente();
    this.getcatebaylieuxfirst();
    //this.getcrediturgent();
    //this.getbanque();
  },



  methods: {
    shlieu() {
      this.shoowliu = true;
    },
    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;

    },


    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;
      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;

        })
        .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);
        })
    },

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

          this.clients = response.data.clients

        })
        .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;

      /*}*/
    },


    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('./newavoir', {


          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'
         );
    
          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());
      })
    }

  },

}
</script>
   