<template>
 
 

  <div class="content">
   <h1>Bon de livraison7</h1>   
           <div 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> 
     <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">
   <div class="form-group">
     <label for="exampleFormControlSelect1">transporteur</label>
  <input type="text">
   
   </div>
 </div>
 <div class="col-md-3">
   <div class="form-group">
     <label for="exampleFormControlSelect1">confirme Bl</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">
         <h5 class="modal-title">
 
     
         </h5>
 <div   v-for="lieu in lieustocks" :value="lieu.id">
 <button class="btn btn-info mr-2" @click="getcatebaylieux2(lieu.id)">{{ lieu.lieu }}</button>
 </div>
 
 
 
         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
           <span aria-hidden="true">&times;</span>
         </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="showcategorie(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 prods" :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="showcat"  class="modal-body  ">
         <div class="row">
   <div class="col-md-2"  v-for="cat in categories" :value="cat.id">
  
 <div class="card">
   <div class="card-body" style=" padding: 2px !important;" >
     <img @click="showprduits(cat.id)" style="width: 100%;height: 80px;padding: 0;"  :src="'img/' + cat.img"/>
     <p style="font-weight: bold; color: green;text-align: center;"> {{ cat.cat }}</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">
                    <table 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, index) in carts " v-if="cart.id">
                         <td><button class="btn btn-danger"  @click="deleteRow(index, cart)"><i class="fas fa-solid fa-trash"></i></button></td>
                         <td  style="width: 40px !important;"  class="text-primary font-bold">{{ cart.ref }}</td>
            <td  class="text-primary font-bold">{{ cart.nom }}</td>
            <td  > 
             <div class="form-group">
             <input type="text"  v-model="vente.comme[index]" >  </div> </td>    
                <td> <input style="width: 40px !important;"  v-model="vente.qty[index]"   @keyup="calcule(cart,vente.qty[index])"  >  </td>
            <td>{{ cart.prix }} </td>   
            <td > <button class="btn btn-warning" @click="gethystorique(vente.idclient,cart.id)"><i class="fas-sharp fa-solid fa-eye"></i></button>
     
           
           </td>
    
         
            <td >
 
 
             <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" :title="cart.prixachat+'DH'" >
               <i class="fa-solid fa-eye"></i>
 </button>           
 
 
             
             
            </td>
            <td>{{ cart.total }}</td>
 
              </tr>
 
            
            
            
           
 
              
                      </tbody>
                    
                    </table>
                  </div>
 
      <div class="form-group">
      <label for="exampleInputEmail1" class="form-label">comentair</label>
        <input v-model="vente.comment" type="text" class="form-control" >
      </div>
                  <!-- /.card-body -->
    </div>
    </div>
    <div class="content">
      <div class="card">
        <div class="card-body">
        <div class="row"> 
          <div class="col-md-3"> </div>
    <div class="col-md-3"></div>
    
    <div class="col-md-3"> 
     <div class="form-group">
      <label for="exampleInputEmail1" class="form-label">remise</label>
        <input  style="width: 100px !important;" v-model="vente.remise"  @keyup="changeremise()" type="text" class="form-control" >
      </div>
      {{ vente.idlieutoock }}
    </div>
    <div class="col-md-3"> 
      <p class="font-weight-bold"> total:{{subtotal}}</p>
 
      <p class="font-weight-bold"> total:{{total}}</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" >
      </div>
      <button class="btn btn-success" @click="addpay">enregistrer</button>
  
      
    
 
  
    
    </div>
    
    </div> </div>
    </div>
    </div>
 <div class="content">
   <div class="card">
     <div class="card-body">
     <div class="row"> 
 
 
 
 
 -
 
 
 
   </div> </div>
 </div>
 </div></div>
 
 </template>
 
 <script>
       export default {
           data() {
             return{
               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,
               idcategorie:'',
               hystoriqprix:[],
               remise:0,
               idproduit:'',
               prods:[],
               produit:[],
               clients:[],
               client:[],
               lieustocks:[],
               topcats:[],
               categories:[],
               topcat1:[],
               modepayements:[],
               bonenattentsituations:[],
               transporteurs:'',
               produitid:[],
               prixdevente:'',
               porcentag:'',
               tva:'',
             
               subtotal:0 ,
               total:0,
               //
               
 
 
               //
               carts:[],
       
           
               vente:{
                 idtransporteur:'',
                 idbonenattentsituation:'',
                 idlieutoock:'',
                   idcategorie:'',
                 comment:'',
                 idmod:'',
                 dateecheance:'',
                 avance:'',
                 idclient:'',
                 //prixtotal:'',
                 comme:[],
                 idproduit:[],
                 prixdevente:[],
                 qty:[],
                 total:[],
               }
             }
           },
  created(){
  // this.getcategorie();
     this.getclients();
    this. getmode();
    this. getlieustock();
    this.  getbonenattentsituation();

    this.getcatebaylieuxfirst();
           },        
        
 
         
           methods:{
 
 
             getlieustock(){
        
        axios.get('./api/lieustock')
      .then(response =>{
      this.lieustocks = response.data.lieustock;
     
      
      })
      .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);
      })
      }, 
 
 showcategorie(id){
 
  axios.get('./api/catpytop/'+id)
   .then(response =>{
     this.categories = response.data.categories;
     console.log(this.categories );
     this.showcat=true;
  this.showtopcat=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);
    })
 },
 
 
               calcule(cart,qty){
   
  cart.total=Number(cart.prix) * Number(qty);
  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);
    })
    },
    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);
   })
   },
   addcart(pro){
 
 
    this.carts.push(
 
    {
     
             id:pro.id,
             ref:pro.ref,
             nom:pro.nom,
             prix:pro.prixvents,
             prixachat:pro.prixun,
            qty:1,
             total:pro.prixvents,
             comment:'x',
         
    }
    
    );
 
  
    var subtotal, total;
               subtotal = this.carts.reduce(function (sum, product) {
                   var lineTotal = parseFloat(product.total);
                   if (!isNaN(lineTotal)) {
                       return sum + lineTotal;
                   }
               }, 0);
        
   this.subtotal=subtotal;
   this.total=subtotal;
 
   this.vente.comment="rien";
   //this.tva=this.subtotal*this.porcentag;
  // this.vente.prixtotal=this.subtotal+this.tva;
 this.table=true;
 this.vente.idproduit.push(pro.id);
 this.vente.prixdevente.push(pro.prixvents);
 this.vente.qty.push(1);
 this.vente.comme.push('rien')
 
 
   },
 
   
 
   
   //post
   addpay(){
   
     axios.post('./addvente', {
 
       client: this.vente.idclient,
       idlieutoock:this.vente.idlieutoock,
       idmod:this.vente.idmod,
       prixtotal: this.total,
       id:this.vente.idproduit,
       //dateecheance:this.vente.dateecheance,
       comment:this.vente.comment,
       qty:this.vente.qty,
       avance:this.vente.avance,
      
       //transporteur:this.vente.idtransporteur,
       bonstatut:this.vente.idbonenattentsituation,
   
     
      
     })
     .then(function (response) {
     
    
       Swal.fire(
   'parfait!',
   'vente bien enregistrer!',
   'success'
 )
      
     })
     .catch(function (error) {
       console.log(error);
     });
     this.carts='';
     this.total=0;
     this.subtotal=0;
     //this.vente.prixtotal=0;
     this.vente.comment='';
     this.vente.remise='';
     this.vente.idlieutoock='';
    // this.vente.idtransporteur='';
     this.vente.idbonenattentsituation='';
     this.vente.idclient='';
     this.vente.idmod='';
     this.table=false;
     //ferme mode
     this.showfirst=false;
     this.showtopcat=false;
      this.showcat=false;
    this.showprod=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.total);
                   if (!isNaN(lineTotal)) {
                       return sum + lineTotal;
                   }
               }, 0);
   this.subtotal=subtotal;
   this.tva=this.subtotal*this.porcentag;
   this.vente.prixtotal=this.subtotal+this.tva;
   cart.prix='';
   this.vente.qty[index]='';
       },
         },
 
 
         computed:{
       changeremise(){
         this.total=this.subtotal-this.vente.remise;
   return this.total;
 
 },
  
     },
         
       }
   </script>
 