<template>


    <div class="content-header">
        <div class="container-fluid">
          <div class="row mb-2">
            <div class="col-sm-6">
            
              <h3 class="font-weight-bold">Bon de Livraiso5</h3>
            </div><!-- /.col -->
         
      </div></div>
      
               <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>
                            </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">
             <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">
     <button class="btn btn-info mr-2" @click="getcatebaylieux2(lieu.id)">{{ lieu.lieu }}</button>
     </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="'img/' + 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 class="content">
          <div class="card">
                      <!-- /.card-header -->
                      <div class="card-body">
                        <table v-if="table" id="example2" class="table table-bordered table-hover">
                          <thead>
                          <tr class=" bg-info ">
                            <th >	SUP</th>
                            <th >	PHOTO</th>
                           <th >	CODE ARTICLE</th>  
                           <th >DÉSIGNATION</th>
                            <th >QAUNTITÉ</th>   
                            <th >	PRIX DE D'ACHAT</th>  
                         <th >MONTANTACHAT</th>
                         <th >		PRIX DE VENTE</th>  
                         <th >DÉPOT</th>
                         
                            
                          </tr>
                          </thead>
                          <tbody>
                            <tr   v-for="cart in carts " >
                             <td  style="width:50px !important;"><button class="btn btn-danger" ><i class="fas fa-solid fa-trash"></i></button></td>
                             <td  class="text-primary font-bold">image</td>
                             <td  style="width:150px !important;"  class="text-primary font-bold">{{ cart.ref }}</td>
                <td  class="text-primary font-bold">{{ cart.nom }}</td>
         
                    <td> <input    style="width: 40px !important;" v-model="cart.quantite"   @keyup="calculeqty(cart)">   </td>
                    <td> <input    style="width: 40px !important;"  v-model="cart.prixun">   </td>
                    <td  >{{cart.tot}}</td>
                    <td> <input    style="width: 40px !important;"  v-model="cart.prixvents">   </td>
                    <td  >depot</td>
                   
                   
     
        
             
  
     
                  </tr>
     
                
          
                
               
     
                  
                          </tbody>
      
                        </table> 
    
      {{ achat.total }}
                      <!-- /.card-body -->
        </div>
     
     
      </div>
      </div>
  
    
  
    </div>
     </template>
     
     <script>
           export default {
               data() {
                 return{
                  shoowliu:false,
                  q:'',
                  bloc:true,
                  bloc2:false,
              
            
                   qty:1,
                   showfirst:true,
                   showprod:false,
                   showtopcat:false,
                   showcat:false,
                   table:true,
       
                
                   showcat:false,
                   showmode:false,
                   showproduit:false,
                   showdate:false,
                   prods:[],
                   produit:[],
                   lieustocks:[],
                   topcats:[],
                   topcat1:[],
             
               
                
                  
             
                 
            
    carts:[],
           
               
                   achat:{
                    total:0,
                   }
                 }
               },
      created(){
      
      
        this. getlieustock();
  
        this.getlastidvente();
        this.getcatebaylieuxfirst();
  
               },        
            
     
             
               methods:{
                shlieu(){
                  this.shoowliu=true;
                },
  
                addcart(produit){
                  let  name = this.carts.findIndex(item=>item.id===produit.id);  
    
    if(name !=-1)  {
    this.carts[name].quantite++;
   
    
    }else{
    this.carts.push(produit);
    produit.quantite=1;
  
    produit.tot=produit.prixun*produit.quantite;
    
    }
    var subtotal;
                   subtotal = this.carts.reduce(function (sum, product) {
                       var lineTotal = parseFloat(product.tot);
                       if (!isNaN(lineTotal)) {
                           return sum + lineTotal;
                       }
                   }, 0);
            
     
       this.achat.total=subtotal;
     
                },
  
     
                calculeqty(cart){
                 
                  let  name = this.carts.findIndex(item=>item.id===cart.id);  
                 
    
    if(name !=-1)  {
     
    this.carts[name].tot= this.carts[name].prixun* this.carts[name].quantite;
    
    }
     
    var subtotal;
                   subtotal = this.carts.reduce(function (sum, product) {
                       var lineTotal = parseFloat(product.tot);
                       if (!isNaN(lineTotal)) {
                           return sum + lineTotal;
                       }
                   }, 0);
            
     
       this.achat.total=subtotal;
  
      
    
    
    }    ,  
                 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);
        })
     },
     
  
        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);
        })
        },
    
    
  
        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);
       })
       },
       
  
      
      
       getlastidvente(){
             axios.get('./api/lastid')
        .then(response =>{
       
       this.lastidvente = response.data.lasid
       
        })
        .catch(error =>{
        console.log(error);
        })
        },
       
       //post
       addpay(){
        
    
         axios.post('./addvente', {
          
     
           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,
           comme:this.vente.comme,
           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,
   }).then(function (response) {
            Swal.fire(
       'parfait!',
       'vente bien enregistrer!',
       'success'
     );
    
         })
         .catch(function (error) {
       
         
    
    Swal.fire({
      icon: 'error',
      title: 'Oops...',
      text: 'tous les donner sont obligatoire',
      footer: '<a href="">revenire au facture?</a>'
    });
    
         });
    
         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.table=false;
        this.buttonpdf1=true;
      this.bloc=false;
      this.bloc2=false;
     this.buttonpdf1=true;
      this.bloc=false;
      this.bloc2=false; 
    
       },
       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>
     